需求中描述是要将一个页面下载成word文档，研究了个demo测试一下。
1、下载依赖
npm install html-docx-js-typescript --save-dev
npm install file-saver --save-dev
npm install dom-to-image --save-dev
2、在调用的页面导入
import domtoimage from 'dom-to-image'
import { asBlob } from 'html-docx-js-typescript'
import { saveAs } from 'file-saver'
3、界面中调用js
exportWord (dom) {
const node = document.getElementById(dom) // 通过id获取dom 任意节点都可以
domtoimage
.toPng(node)
.then((dataUrl) => {
//这里的htmlString可以自定义一些word模板来将页面的dom转化从而达到将界面上的高度还原到word中 echarts保存成图片放进来即可dataUrl
const htmlString = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Word标题</div>
<div>
<img width="850" height="500" src="${dataUrl}"/>
</div>
</body>
</html>`
const opt = {
orientation: 'landscape'
}
asBlob(htmlString, opt).then(data => {
saveAs(data, 'file.docx') // save as docx file
})
})
.catch(function (error) {
console.error('oops, something went wrong!', error)
})
},
保存成图片下载到本地
// 截图并下载
shotPic (domId, name) {
const node = document.getElementById(domId) // 通过id获取dom
domtoimage
.toPng(node)
.then((dataUrl) => {
// 输出图片的Base64,dataUrl
// 下载到PC
const a = document.createElement('a') // 生成一个a元素
const event = new MouseEvent('click') // 创建一个单击事件
a.download = `${name}` // 设置图片名称没有设置则为默认
a.href = dataUrl // 将生成的URL设置为a.href属性
a.dispatchEvent(event) // 触发a的单击事件
})
.catch(function (error) {
console.error('oops, something went wrong!', error)
})
},
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
