昨天遇到了一個業(yè)務(wù)問題，需要對界面進(jìn)行截圖并導(dǎo)出Word。我們是基于cesium做的，cesium的截圖只能是對地球進(jìn)行截圖，不能全部界面進(jìn)行截圖。后來轉(zhuǎn)用html2canvas。
廢話不多說，看看最終是怎么實(shí)現(xiàn)的吧。
首先需要安裝html2canvas;它可以將HTML內(nèi)容寫入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
實(shí)現(xiàn)代碼--------------------對界面進(jìn)行截圖并導(dǎo)出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, //畫出來的圖片有白色的邊框,不要可設(shè)置背景為透明色（null）
useCORS: true, //支持圖片跨域
scale: 1, //設(shè)置放大的倍數(shù)
}).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標(biāo)題</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
相關(guān)延伸 一個截圖并下載圖片的例子
npm install --save html2canvas
import html2canvas from 'html2canvas';
downloadFun() {
html2canvas(document.getElementById('app'), { // app可以改成你想要生成圖片的任意id，或者自己 可以換其他 元素
backgroundColor: null, //畫出來的圖片有白色的邊框,不要可設(shè)置背景為透明色（null）
useCORS: true, //支持圖片跨域
scale: 1, //設(shè)置放大的倍數(shù)
}).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
