1. 安装html2canvas jspdf不多说
npm install --save html2canvas
npm install html2canvas --save
2. 引入
import html2Canvas from "html2canvas"
import JsPDF from "jspdf"
3.封装方法
//导出成pdf
export async function exportPdf(ele,option,callBack){
store.dispatch('setLoading', true)
//通过接口图片转换为base64
await imgToBase64(ele)
html2Canvas(ele, {
allowTaint: true,
useCORS:true,
...option
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
console.log(leftHeight)
console.log(pageHeight)
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(option.name || '导出pdf' + '.pdf')
if(option.isRemove){
ele.remove()
}
store.dispatch('setLoading', false)
callBack && callBack()
})
}
4.建议求后端给个图片转base64的接口来解决图片跨域
//img转成base64
export function imgToBase64(ele){
//由于网络图片设置到图片跨域问题,通过接口转换成base64
return new Promise((resolve) => {
let imgs = ele.getElementsByTagName('img')
if(imgs.length <= 0){
resolve(true)
} else {
let index = 0
imgs.forEach(item => {
encodeImageToBase64({file:item.src}).then(res=>{
if(res.code == 200 && res.data){
item.src = res.data
index ++
if(index >= imgs.length){
resolve(true)
}
}
})
});
}
})
}
5.效果