由于在做这个项目的时候，用的是react，所以就将这篇文章放在这里吧
将HTML模板转成pdf
根据pdf,编写html模板,也可以使用工具转，不过转出来的效果不是很理想,将要替换的数据使用mustache的写法
Image1.png
- 调后台接口，成功的得到数据
const url = '/api/invoices/show_edit_invoice.json'
const params = {
user_session_key: localStorage.getItem('user_session_key'),
id: this.invoice_id
}
this.http.REQUEST(url, params, method).then(res => {
if (res.data.status.code === '20000') {
const data = res.data.data
const obj = {}
// 将得到的数据传过去，渲染HTML模板
this.exportFile(obj)
this.setState({ export_visible: false })
}
})
- 解析数据，使用mustache渲染html模板,得到的output会是一个html格式的字符串，在require html的时候，会碰到无法找到module的报错,因为缺少html-loader,nam install html-loader —save-dev,解决，同时
{
test: /\.html$/,
loader: 'html'
}
let output
// 根据输出不同的类型文件，使用不用HTML模板
if (this.state.exportInvoice.value === 'pdf') {
output = mustache.render(template_pdf, obj)
} else if (this.state.exportInvoice.value === 'excel') {
output = mustache.render(template_excel, obj)
} else if (this.state.exportInvoice.value === 'word') {
output = mustache.render(template_word, obj)
}
- 引入JSPDf
<script src="https://cdn.bootcss.com/jspdf/1.3.2/jspdf.min.js"></script>
- 这个时候得到了输出后的html字符串，现在进行处理
// 使用iframe将其渲染到页面中，不然会出现奇葩的报错信息
const parser = new DOMParser()
const htmldoc = parser.parseFromString(output, 'text/html')
const body_str = htmldoc.documentElement.getElementsByTagName('body')[0].innerHTML
const head_str = htmldoc.documentElement.getElementsByTagName('head')[0].innerHTML
const myiframe = document.createElement('iframe')
myiframe.style.width = '1400px'
myiframe.style.height = '900px'
document.body.appendChild(myiframe)
myiframe.contentWindow.document.body.style.backgroundColor = '#ffffff'
if (navigator.userAgent.indexOf('Firefox') >= 0) {
myiframe.contentWindow.document.body.innerHTML = body_str
myiframe.contentWindow.document.head.innerHTML = head_str
} else {
myiframe.contentWindow.document.body.innerHTML = body_str
myiframe.contentWindow.document.head.innerHTML = head_str
}
