html转pdf

站长
· 阅读数 6
- 先npm html2canvas jspdf
- 然后在utils添加htmlToPdf.js
//具体代码import html2canvas from 'html2canvas'import JSPDF from 'jspdf'export default { install(Vue, options) {
Vue.prototype.ExportSavePdf = function() {
var element = document.getElementById('pdfDom')
html2canvas(element, {
logging: false
}).then(function(canvas) {
/**jspdf将html转为pdf一页显示不截断,整体思路:
* 1. 获取DOM
* 2. 将DOM转换为canvas
* 3. 获取canvas的宽度、高度(稍微大一点)
* 4. 将pdf的宽高设置为canvas的宽高
* 5. 将canvas转为图片
* 6. 实例化jspdf,将内容图片放在pdf中(因为内容宽高和pdf宽高一样,就只需要一页,也防止内容截断问题)
*/
// 得到canvas画布的单位是px 像素单位
var contentWidth = 1062
var contentHeight = canvas.height
console.log('contentWidth', contentWidth)
console.log('contentHeight', contentHeight)
// 将canvas转为base64图片
var pageData = canvas.toDataURL('image/jpeg', 1.0)
// 设置pdf的尺寸,pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
// 2为上面的scale 缩放了2倍
var pdfX = ((contentWidth + 10) / 2) * 0.75
var pdfY = ((contentHeight + 20) / 2) * 0.75 // 20为底部留白
console.log(pdfX, pdfY, 'pdfx')
// 设置内容图片的尺寸,img是pt单位
var imgX = pdfX - 20 //设置margin
var imgY = (contentHeight / 2) * 0.75 //内容图片这里不需要留白的距离
// 初始化jspdf 第一个参数方向:默认''时为纵向,第二个参数设置pdf内容图片使用的长度单位为pt,第三个参数为PDF的大小,单位是pt
var PDF = new JSPDF('', 'pt', [pdfX, pdfY])
// 将内容图片添加到pdf中,因为内容宽高和pdf宽高一样,就只需要一页,位置就是 0,0
PDF.addImage(pageData, 'jpeg', 10, 10, imgX, imgY)
PDF.save('download.pdf')
})
}
}}
3.main.js全局注册import htmlToPdf from '../src/utils/htmlToPdf'Vue.use(htmlToPdf)
4.在vue组件里面使用<el-button type="primary" @click="ExportSavePdf()">PDF</el-button>