接了个需求, 需要把项目页面中某一块内容导出word文档,然后线下可编辑,经具体的业务场景需要. 共需要实现两种情况.
1. 页面内容长啥样, 导出后就长啥样!
import { saveAs } from "file-saver";
const mhtml = {
top: "<!DOCTYPE html>\n<html xmlns:o=\"urn:schemas-microsoft-com:office:office\"\n" +
" xmlns:w=\"urn:schemas-microsoft-com:office:word\"\n" +
" xmlns:dt=\"uuid:C2F41010-65B3-11d1-A29F-00AA00C14882\"\n" +
" xmlns=\"http://www.w3.org/TR/REC-html40\">\n_html_</html>",
head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n",
body: "<body>_body_</body>"
}
export const exportReport = (styles, html, reportName) => {
let fileContent = mhtml.top.replace("_html_", mhtml.head.replace("_styles_", styles) +
mhtml.body.replace("_body_", html));
let blob = new Blob([fileContent], { type: "application/msword;charset=utf-8" });
saveAs(blob, reportName + ".doc");
}
// 调用
let styles = require('./reportExportStyle').default; // 页面的样式 提取后:reportExportStyle.css
let contentObj = document.getElementById('content'); // 导出元素的id content
exportReport(styles, contentObj.innerHTML, '导出的文件名xxx.doc')
2. 根据模板 来填充内容 先上个模板的图
`
tips:目前只用到 普遍变量, 和数组动态渲染 其余的表达式需要自己去网上找了.我也是找了好久
当模板准备好之后 上代码
import {saveAs} form 'file-saver'
import docxtemplater form 'docxtemplater'
import Pizzip form 'pizzip'
function exportWord(templateName, fileData, outputFileName) {
fetch(templateName)
.then(response => response.arrayBuffer())
.then(content => {
const zip = PizZip(content)
const doc = docxtemplater().loadZip(zip)
doc.setData(fileData)
try {
doc.render()
} catch (error) {
throw error
}
const out = doc.getZip().generate({
type: 'blob'
})
saveAs(out, `${outputFileName}.docx`);
})
}
let fileUrl = '/static/assets/test.docx' // 模板文件所在路径
const mockData = {
content: '我是标题',
people: [
{index: 1, name: '坤坤', age: '18', dis: '帅气'},
{index: 2, name: '凡凡', age: '38', dis: '逼人'},
]
}
exportWord(fileUrl, mockData, '测试文档')
如果这段代码能帮上忙! 麻烦点个赞吧!
