昨天遇到了一个业务问题，需要对界面进行截图并导出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 = `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>Word标题</h1> <div> <img width="850" height="500" src="${imgBase64}"/> </div> </body> </html>` 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/
