昨天遇到了一个业务问题，需要对界面进行截图并导出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'
export default {
methods: {
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
})
});
}
} }
image
相关延伸 一个截图并下载图片的例子
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();
}）
}
image
附上链接https://www.npmjs.com/package/html-docx-js-typescript
