您现在的位置是：首页 > 技术教程 正文

vue 前端导出页面图表保存为Html格式文档

admin 阅读： 2024-03-30
后台-插件-广告管理-内容页头部广告（手机）

问题描述：

遇到一个需求，需要前端将页面上所有的图表导出，比如有echarts的图表（折线图、饼图、柱状图）、 表格、文本、图片、标签（也是一段文字）等类型，保存成一个html格式的文档，在浏览器中直接打开 这个html文档可以看到跟之前页面上一样的展示效果。
  • 1
  • 2
  • 3

在这里插入图片描述图一

解决思路：

在研究的过程中，像echarts图表和图片，都需要保存为base64图片格式来使用，图片转成base64是为了保证导出到html 文档中之后，在不是内网的环境中打开html文档，图片可以正常显示，echarts是需要请求数据，导出的文档中再打开之后， 肯定不可能再去请求数据了，所以也需要转成base64处理。
  • 1
  • 2
  • 3

想要达到要求的效果，网上找了很久，最后记录下2种方案：
方案一、使用html2canvas组件，html2canvas的作用就是允许我们直接在用户浏览器上拍摄网页或某一部分的截图。它的屏幕截图是基于DOM元素的，实际上它不会生成实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。

exportReport (fileName) { //需要的dom元素，需要自己定位到拿得到 let dom = this.$refs.exportTemplate.$parent.$parent.$parent.$refs.exportDiv.$refs.realDom // 给的dom元素必须是原生的dom元素，不能是elementUI在浏览器中生成的，不然html2canvas会报错: Element is not attached to a Document html2canvas(dom, { backgroundColor: null, useCORS: true // 配置图片可跨域 }).then(canvas => { // 转成图片，生成图片地址 let imgUrl = canvas.toDataURL('image/png') // 可将 canvas 转为 base64 格式 // 创建HTML内容 const htmlContent = ` 导出的HTML文件

这是一个导出的文档

%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20//%20创建Blob对象 %20%20%20%20%20%20%20%20const%20blob%20=%20new%20Blob([htmlContent],%20{%20type:%20'text/html;charset=utf-8'%20}) %20%20%20%20%20%20%20%20//%20创建下载链接 %20%20%20%20%20%20%20%20const%20downloadLink%20=%20document.createElement('a') %20%20%20%20%20%20%20%20downloadLink.href%20=%20URL.createObjectURL(blob) %20%20%20%20%20%20%20%20downloadLink.download%20=%20`${fileName}.html` %20%20%20%20%20%20%20%20//%20模拟点击下载链接 %20%20%20%20%20%20%20%20downloadLink.click() %20%20%20%20%20%20%20%20//%20释放URL对象 %20%20%20%20%20%20%20%20URL.revokeObjectURL(downloadLink.href) %20%20%20%20%20%20}) %20%20%20%20}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

注意
1、使用html2Canvas只能截取当前页面中显示的内容，如果当前页面中存在滚动条，html2canvas方法第一个参数dom就要给整个包含所有的元素长度的最外层元素才能将滚动的内容都截取下来。
2、这种方法实现的效果，整个页面就像一个pdf，所有的交互都不存在了，如果页面上还存在操作（比如点击展示，点击收起）是无法实现的。

方案二、需要根据页面中已存在的内容先生成一个html模板，然后获取页面的数据，循环生成相应的dom结构，就是用原生的html元素再实现一遍图一；表格、echarts可以直接用base64图片。生成这些内容后，外面套个html模板，最后再导出。

createHtml (fileName, templateName) { console.log(this.json.components) //所有的数据来源 let str = '' this.json.components.forEach(data=> { if (data.componentType == 'Picture') { str += ` %20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20}%20else%20if%20(data.componentType%20==%20'Label')%20{ %20%20%20%20%20%20%20%20%20%20str%20+=%20`${data.attributes.fontSize};color:${data.attributes.fontColor}"> %20%20%20%20%20%20%20%20%20%20%20%20${JSON.parse(data.translatedData)[data.bindData]} %20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20}%20else%20if%20(['Histogram',%20'Line-Chart',%20'Pie-Chart'].includes(data.componentType))%20{ %20%20%20%20%20%20%20%20%20%20str%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20${data.componentName} %20%20%20%20%20%20%20%20%20%20%20%20${data.attributes.showDesc%20?%20data.attributes.desc%20:%20''} %20%20%20%20%20%20%20%20%20%20%20%20%20${data.base64}"%20alt="图表"> %20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20}%20else%20if%20(data.componentType%20==%20'Rich-Text')%20{ %20%20%20%20%20%20%20%20%20%20str%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20${data.componentName} %20%20%20%20%20%20%20%20%20%20%20%20${data.attributes.showDesc%20?%20data.attributes.desc%20:%20''} %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${data.attributes.rowsNum}"%20class="el-textarea__inner"%20style="resize:%20none;%20min-height:%2030px;">${JSON.parse(data.translatedData)[data.bindData]}%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20}%20else%20if%20(data.componentType%20==%20'Form')%20{ %20%20%20%20%20%20%20%20%20%20//%20表单 %20%20%20%20%20%20%20%20%20%20//%20数据源：data.showList %20%20%20%20%20%20%20%20%20%20let%20formHtml%20=%20'' %20%20%20%20%20%20%20%20%20%20data.showList.forEach(itemm%20=>%20{ %20%20%20%20%20%20%20%20%20%20%20%20formHtml%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20${data.attributes.columns%20==%20'1'%20?%20'one-col'%20:%20'two-col'}"> %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${itemm.name} %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20%20%20%20%20if%20(itemm.style%20&&%20itemm.style.location%20&&%20itemm.style.location%20==%201)%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20formHtml%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${itemm.icon_base64}"%20style="height:${itemm.style.height}px;width:${itemm.style.width}px;"> %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${itemm.value} %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20%20%20%20%20}%20else%20if%20(itemm.style%20&&%20itemm.style.location%20&&%20itemm.style.location%20==%202)%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20formHtml%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${itemm.value} %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${itemm.icon_base64}"%20style="height:${itemm.style.height}px;width:${itemm.style.width}px;"> %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20%20%20%20%20}%20else%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20formHtml%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${itemm.value} %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20%20%20%20%20} %20%20%20%20%20%20%20%20%20%20}) %20%20%20%20%20%20%20%20%20%20str%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20${data.componentName} %20%20%20%20%20%20%20%20%20%20%20%20${data.attributes.showDesc%20?%20data.attributes.desc%20:%20''} %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20${formHtml} %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20}%20else%20if%20(data.componentType%20==%20'Standard-Form')%20{ %20%20%20%20%20%20%20%20%20%20//%20mainTable%20表头数据%20%20subTable%20%20displayName-表头数值%20%20field对应字段%20%20%20tableData表格数值 %20%20%20%20%20%20%20%20%20%20let%20table%20=%20'\n' %20%20%20%20%20%20%20%20%20%20table%20+=%20'' %20%20%20%20%20%20%20%20%20%20if%20(data.attributes.tableNumber)%20{ %20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20'序号' %20%20%20%20%20%20%20%20%20%20} %20%20%20%20%20%20%20%20%20%20let%20tableHead%20=%20data.mainTable %20%20%20%20%20%20%20%20%20%20tableHead.forEach(obj%20=>%20{ %20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20`${obj.displayName}\n` %20%20%20%20%20%20%20%20%20%20}) %20%20%20%20%20%20%20%20%20%20table%20+=%20'' %20%20%20%20%20%20%20%20%20%20let%20tableData%20=%20data.tableData %20%20%20%20%20%20%20%20%20%20let%20subTable%20=%20data.subTable %20%20%20%20%20%20%20%20%20%20//%20row%20表格一行数据 %20%20%20%20%20%20%20%20%20%20tableData.forEach((row,%20index)%20=>%20{ %20%20%20%20%20%20%20%20%20%20%20%20debugger %20%20%20%20%20%20%20%20%20%20%20%20//%20创建主表内容 %20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20`\n`%20+%20(data.attributes.tableNumber%20?%20`${index%20+%201}`%20:%20'') %20%20%20%20%20%20%20%20%20%20%20%20tableHead.forEach(headRow%20=>%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20//%20table%20+=%20`${row[headRow.field]}\n` %20%20%20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20`` %20%20%20%20%20%20%20%20%20%20%20%20%20%20let%20param%20=%20row[headRow.field%20+%20'_style'] %20%20%20%20%20%20%20%20%20%20%20%20%20%20let%20originParam%20=%20row[headRow.field%20+%20'1'] %20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(param%20&&%20param.iconUrl%20&&%20param.location%20==%201%20&&%20(originParam%20?%20originParam%20==%20param.condition%20:%20true))%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${row[headRow.field%20+%20'_style_base64']}"%20style="height:${param.height}px;width:${param.width}px;"> %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${row[headRow.field]} %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20else%20if%20(param%20&&%20param.iconUrl%20&&%20param.location%20==%202%20&&%20(originParam%20?%20originParam%20==%20param.condition%20:%20true))%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${row[headRow.field]} %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${row[headRow.field%20+%20'_style_base64']}"%20style="height:${param.height}px;width:${param.width}px;"> %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20else%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${row[headRow.field]} %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20} %20%20%20%20%20%20%20%20%20%20%20%20}) %20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20`\n` %20%20%20%20%20%20%20%20%20%20%20%20if%20(data.attributes.subTableIsShow)%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20//%20子表内容%20colspan需要合并单元格才能一行空间都有 %20%20%20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20`${data.attributes.tableNumber%20?%20data.mainTable.length%20+%201%20:%20data.mainTable.length}>\n` %20%20%20%20%20%20%20%20%20%20%20%20%20%20subTable.forEach(item%20=>%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${item.displayName} %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20let%20param%20=%20row[item.field%20+%20'_style'] %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20let%20originParam%20=%20row[item.field%20+%20'1'] %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(param%20&&%20param.iconUrl%20&&%20param.location%20==%201%20&&%20(originParam%20?%20originParam%20==%20param.condition%20:%20true))%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${row[item.field%20+%20'_style_base64']}"%20style="height:${param.height}px;width:${param.width}px;"> %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${row[item.field]} %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20else%20if%20(param%20&&%20param.iconUrl%20&&%20param.location%20==%202%20&&%20(originParam%20?%20originParam%20==%20param.condition%20:%20true))%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${row[item.field]} %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${row[item.field%20+%20'_style_base64']}"%20style="height:${param.height}px;width:${param.width}px;"> %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20else%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${row[item.field]} %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20} %20%20%20%20%20%20%20%20%20%20%20%20%20%20}) %20%20%20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20`\n` %20%20%20%20%20%20%20%20%20%20%20%20} %20%20%20%20%20%20%20%20%20%20}) %20%20%20%20%20%20%20%20%20%20table%20+=%20'' %20%20%20%20%20%20%20%20%20%20str%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20${data.componentName} %20%20%20%20%20%20%20%20%20%20%20%20${data.attributes.showDesc%20?%20data.attributes.desc%20:%20''} %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${table} %20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20}%20else%20if%20(data.componentType%20==%20'Dynamic-Table')%20{ %20%20%20%20%20%20%20%20%20%20//%20动态表格 %20%20%20%20%20%20%20%20%20%20let%20translated%20=%20JSON.parse(data.translatedData) %20%20%20%20%20%20%20%20%20%20let%20table%20=%20'\n' %20%20%20%20%20%20%20%20%20%20table%20+=%20'' %20%20%20%20%20%20%20%20%20%20let%20tableHead%20=%20translated[data.fieldNameList] %20%20%20%20%20%20%20%20%20%20tableHead.forEach(name%20=>%20{ %20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20`${name}\n` %20%20%20%20%20%20%20%20%20%20}) %20%20%20%20%20%20%20%20%20%20table%20+=%20'' %20%20%20%20%20%20%20%20%20%20//%20数据源%20translatedData.dataList%20%20fieldWidthList%20宽度%20%20fieldList字段列表 %20%20%20%20%20%20%20%20%20%20let%20realData%20=%20translated[data.dataList] %20%20%20%20%20%20%20%20%20%20realData.forEach(dataItem%20=>%20{ %20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20`\n` %20%20%20%20%20%20%20%20%20%20%20%20translated[data.fieldList].forEach(columnsItem%20=>%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20`${dataItem[columnsItem]}\n` %20%20%20%20%20%20%20%20%20%20%20%20}) %20%20%20%20%20%20%20%20%20%20%20%20table%20+=%20`\n` %20%20%20%20%20%20%20%20%20%20}) %20%20%20%20%20%20%20%20%20%20table%20+=%20'' %20%20%20%20%20%20%20%20%20%20str%20+=%20` %20%20%20%20%20%20%20%20%20%20%20%20${data.componentName} %20%20%20%20%20%20%20%20%20%20%20%20${data.attributes.showDesc%20?%20data.attributes.desc%20:%20''} %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20${table} %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20} %20%20%20%20%20%20}) %20%20%20%20%20%20let%20html%20= %20%20%20%20%20%20%20%20` %20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20文件导出 %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${templateName} %20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20${str} %20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20` %20%20%20%20%20%20console.log(html) %20%20%20%20%20%20//%20创建Blob对象 %20%20%20%20%20%20const%20blob%20=%20new%20Blob([html],%20{%20type:%20'text/html;charset=utf-8'%20}) %20%20%20%20%20%20//%20创建下载链接 %20%20%20%20%20%20const%20downloadLink%20=%20document.createElement('a') %20%20%20%20%20%20downloadLink.href%20=%20URL.createObjectURL(blob) %20%20%20%20%20%20downloadLink.download%20=%20`${fileName}.html` %20%20%20%20%20%20//%20模拟点击下载链接 %20%20%20%20%20%20downloadLink.click() %20%20%20%20%20%20//%20释放URL对象 %20%20%20%20%20%20URL.revokeObjectURL(downloadLink.href) %20%20%20%20}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415

导出效果：
在这里插入图片描述

注意：
这种自己写的html导出的方式，效果基本可以达到和页面展示的一样，如果还有事件交互，就需要在html中添加事件，本记录中就没有实现了，需要的可自行继续研究。

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表