vue导出文件后缀为html的页面
震惊!我司要求我把数据融合起来,导出用html的方式展示,请看下面示例
<template><div><el-button @click="gethtml">导出报告</el-button><div id="main"><div ref="htmlall"><!-- 你可以把写的代码放入reportTable 组件中 --><reportTable></reportTable></div></div></div>
</template>
以下是js部分内容
<script>import reportTable from '@/views/reportTable' export default {components:{reportTable},methods: {gethtml() {let a = document.createElement('a')let url = window.URL.createObjectURL(new Blob([this.gethtml()], {type: ''}))a.href = urla.download = `report.html`a.click()window.URL.revokeObjectURL(url)},gethtml() {// 此处获取的是组件reportTable的内容, return htmlconst template = this.$refs.htmlall.innerHTMLlet html = `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title></title></head><body><div class="page" >${template}</div></body></html>`return html}}}
</script>