vue实现界面截图并导出Word html2canvas实现界面截图 file-save和html-docx-js-typescript，html导出Word

昨天遇到了一个业务问题，需要对界面进行截图并导出Word。我们是基于cesium做的，cesium的截图只能是对地球进行截图，不能全部界面进行截图。后来转用html2canvas。

废话不多说，看看最终是怎么实现的吧。

首先需要安装html2canvas;它可以将HTML内容写入Canvas生成图片；

npm install --save html2canvas

再安装html-docx-js-typescript 和file-saver

npm install html-docx-js-typescript --save-dev

npm install  file-saver  --save-dev

实现代码--------------------对界面进行截图并导出Word

import html2canvas from 'html2canvas';                                                                                                                                                            import { asBlob } from 'html-docx-js-typescript';                                                                                                                                                  import { saveAs } from 'file-saver'                                                                                                                                                  exportWord() {                                                                                                                                                                                        let that = this;                                                                                                                                                                                                      html2canvas(document.getElementById('app'), {                                                                                                                                                        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）                                                                                     useCORS: true, //支持图片跨域                                                                                                                                                           scale: 1, //设置放大的倍数                   }).then(canvas => {                                                                                                                                                                                                        let imgBase64 = canvas.toDataURL('image/jpeg');                                                                                                                                            const htmlString = `                     

Word标题

 

   

                `                                                                                                                                                                                                           console.log('htmlString', htmlString)                                                                                                                                                                   const opt = {                                                                                                                                                                                                                orientation: 'landscape'                                                                                                                                                                               }                                                                                                                                                                                                                                      asBlob(htmlString,opt).then(data => {                                                                                                                                                                            saveAs(data, 'file.docx') // save as docx file                                                                                                                                           })                                                                                                                                                                                                                 });                                                                                                                                                                                                              }

相关延伸    一个截图并下载图片的例子   

npm install --save html2canvas

截图下载例子

import html2canvas from 'html2canvas';

downloadFun() {

    html2canvas(document.getElementById('app'), {        //   app可以改成你想要生成图片的任意id，或者自己可以换其他 元素                                   backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）                                                                                     useCORS: true, //支持图片跨域                                                                                                                                                                         scale: 1, //设置放大的倍数                                                                                                                                               }).then(canvas => {                                                                                                                                                                                                      console.log(canvas) //这里打印出来就是base64的图片                                                                         var alink = document.createElement("a");                                                                                                                         alink.href = canvas.toDataURL("image/png");                                                                        alink.download = "download.png";                                                                                                                                                                     alink.click();                                                                                                                                                                                                  }）

}

附上链接https://www.npmjs.com/package/html-docx-js-typescript

https://html2canvas.hertzen.com/

html-docx-js-typescript - npm

html2canvas - Screenshots with JavaScript