尘封已久的csdn,启动!
- 我最近做了什么
- 1、html转pdf
我最近做了什么
想写很多,但是现在想不起来。。。后边再来加。。。
1、html转pdf
需要的库:
"html2canvas": "^1.4.1",
"jspdf": "^2.5.2",
思路:
我尝试纯JS转PDF,发现有些样式无法生效,字体乱码配置太麻烦,所以放弃了
选择了比较笨的,先截图,然后图片放PDF,虽然笨但是结果有保证,除了可能会糊一点,其他没得问题
包括我们本来要对JS解读半天研究他的API,现在有啥想法直接改DOM,爽了不止一点儿
创建工具类:
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
export const downloadPDF = async page => {
const canvas = await html2canvas(page, {
useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
allowTaint: true, //允许跨域
scale: 2, //设置放大倍数
backgroundColor: '#ffffff', //背景色
})
const pdf = canvas2PDF(canvas)
return pdf
}
const canvas2PDF = canvas => {
// 新建JsPDF对象
const PDF = new jsPDF({
orientation: 'p', //参数: l:横向 p:纵向
unit: 'mm', //参数:测量单位('pt','mm', 'cm', 'm', 'in' or 'px')
format: 'a4', //A4纸
})
const ctx = canvas.getContext('2d')
const a4w = 760
const a4h = 1108 //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
// const a4w = 190
// const a4h = 277 //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
const imgHeight = Math.floor((a4h * canvas.width) / a4w) //按A4显示比例换算一页图像的像素高度
let renderedHeight = 0
while (renderedHeight < canvas.height) {
let page = document.createElement('canvas')
page.width = canvas.width
page.height = Math.min(imgHeight, canvas.height - renderedHeight) //可能内容不足一页
//用getImageData剪裁指定区域,并画到前面创建的canvas对象中
page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
// canvas转图片数据保留10mm边距
PDF.addImage(page.toDataURL('image/jpeg', 0.2), 'JPEG', 10, 10, a4w, Math.min(a4h, (a4w * page.height) / page.width))
renderedHeight += imgHeight
//判断是否分页,如果后面还有内容,添加一个空页
if (renderedHeight < canvas.height) {
PDF.addPage()
}
}
PDF.save('导出.pdf') // 浏览器保存一下看看
return PDF
}
调用,很傻但很好用
getpdfHtml() {
let container = document.createElement('div')
container.innerHTML = `
<div style="xxx">
<div>111</div>
<div>222</div>
</div>`
document.body.appendChild(container)
return container
},
async onSubmit() {
const pdfDom = this.getpdfHtml() // 获取想要生成pdf的dom
const pdfFile = await downloadPDF(pdfDom) //
pdfDom.parentNode.removeChild(pdfDom)
}