1、index.html文件内引入
1 <script src="<%= BASE_URL %>js/html-docx.js"></script>
2、在导出页面加入方法
1 // 导出 word 文档 2 exportDocx() { 3 // 克隆报告HTML 4 let contentDocument = $.clone(this.$refs.report); 5 this.convertImagesToBase64(contentDocument); 6 this.convertChartsToBase64(contentDocument); 7 8 let content = `<!DOCTYPE html><html> 9 <head> 10 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 11 </head> 12 <body> 13 ${contentDocument.innerHTML} 14 </body> 15 </html>`; 16 console.log(content); 17 let converted = htmlDocx.asBlob(content); 18 saveAs(converted, `${this.title}.docx`); 19 20 let link = this.createDownloadLink(converted, `${this.title}.docx`); 21 22 this.$refs.downloadArea.innerHTML = ""; 23 this.$refs.downloadArea.appendChild(link); 24 }, 25 26 // 转换图片为 base64 (todo: 有可能因跨域报错) 27 convertImagesToBase64(contentDocument) { 28 // 找到所有的图片 29 let imgs = contentDocument.querySelectorAll("img"); 30 31 // 图片转换用 32 let canvas = document.createElement("canvas"); 33 let ctx = canvas.getContext("2d"); 34 35 imgs.forEach((img, i) => { 36 if (img.src.startsWith("data:image")) return; 37 38 // img表现尺寸 39 let realWidth = parseInt(img.style.width); 40 let realHeight = parseInt(img.style.height); 41 42 // 清空画布并调整为 img 的大小 43 ctx.clearRect(0, 0, canvas.width, canvas.height); 44 canvas.width = realWidth; 45 canvas.height = realHeight; 46 47 // 画图片到画布 48 ctx.drawImage( 49 img, 50 0, 51 0, 52 img.width, 53 img.height, 54 0, 55 0, 56 realWidth, 57 realHeight 58 ); 59 // ctx.drawImage(img, 0, 0); 60 61 // 画布转为 base64 62 let dataURL = canvas.toDataURL(); 63 img.setAttribute("src", dataURL); 64 }); 65 66 canvas.remove(); 67 }, 68 69 convertChartsToBase64(contentDocument) { 70 // 找到所有的图表 （echart） 71 let canvases = contentDocument.querySelectorAll("canvas"); 72 73 // 遍历图表，转换为 base64 静态图片 74 canvases.forEach((canvas, i) => { 75 let echart = this.$refs.chart[i]; 76 let url = echart.getDataURL(); 77 let img = document.createElement("img"); 78 img.src = url; 79 canvas.parentNode.replaceChild(img, canvas); 80 }); 81 }, 82 83 // 生成下载链接 84 createDownloadLink(fileObj, fileName) { 85 let link = document.createElement("a"); 86 link.href = URL.createObjectURL(fileObj); 87 link.download = fileName || "document.docx"; 88 link.appendChild(document.createTextNode("如果没有自动下载，点这里")); 89 return link; 90 },
3、需要导出的元素添加 ref="report"
4、导出按钮旁加一个元素
1 <span ref="downloadArea"></span>
问题：导出word会没有格式。
解决办法：
方法一：需要导出的html写成内联样式
方法二、使用law-loader内联插件
1.安装插件
2.写一个xxx.css.txt样式文件
3.在页面的script标签中引入
var reportCss = require("raw-loader!./xxx.css.txt");
4.导出方法代码改成
// 导出 word 文档 exportDocx() { // 克隆报告HTML let contentDocument = $.clone(this.$refs.report); this.convertImagesToBase64(contentDocument); this.convertChartsToBase64(contentDocument); let content = `<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> ${reportCss} </style> </head> <body> ${contentDocument.innerHTML} </body> </html>`; let converted = htmlDocx.asBlob(content); saveAs(converted, "xxxx.docx"); let link = this.createDownloadLink(converted, "xxxx.docx"); this.$refs.downloadArea.innerHTML = ""; this.$refs.downloadArea.appendChild(link); },