导出部分js代码
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install (Vue, options) {
Vue.prototype.$getPdf = function (id, title) {
// 获取当前浏览器滚动条的宽度，原理是设置一个不可见的div，查看设置scorll前后的宽度差
function getScrollWidth () {
var noScroll, scroll
var oDiv = document.createElement('DIV')
oDiv.style.cssText = 'position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;'
noScroll = document.body.appendChild(oDiv).clientWidth
oDiv.style.overflowY = 'scroll'
scroll = oDiv.clientWidth
document.body.removeChild(oDiv)
return noScroll - scroll
}
const SIZE = [595.28, 841.89] // a4宽高
let node = document.querySelector(`#PdfPage1`)
let nodeW
if (getScrollWidth()) {
nodeW = node.clientWidth - (17 - getScrollWidth())
} else {
nodeW = node.clientWidth
}
// let nodeW = node.clientWidth
// 单页高度
let pageH = nodeW / SIZE[0] * SIZE[1]
let modules = node.children
for (let i = 0, len = modules.length; i < len; i++) {
let item = modules[i]
let beforeH = item.offsetTop
let afterH = beforeH + item.clientHeight
let currentPage = parseInt(beforeH / pageH)
// div距离父级的高度是pageH的倍数x,但是加上自身高度之后是pageH的倍数x+1,说明被切割
if (currentPage !== parseInt(afterH / pageH)) {
// 上一个元素底部距离父级的高度
let lastItemAftarH = modules[i - 1].offsetTop + modules[i - 1].clientHeight
let fill = pageH - lastItemAftarH % pageH
item.style.marginTop = fill + 'px'
}
}
html2Canvas(node, {
// allowTaint: true,
useCORS: true, // allowTaint与useCORS看情况二选一,设置 useCORS 为 true，即可开启图片跨域
scale: 2 // 设置 scale 为 2 及以上，即可支持高分屏
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
// 一页pdf显示html页面生成的canvas高度
let pageHeight = contentWidth / SIZE[0] * SIZE[1]
// 未生成pdf的html页面高度
let leftHeight = contentHeight
// pdf页面竖向偏移
let position = 0
// 横向页边距
let sidesway = 0
// html页面生成的canvas在pdf中图片的宽高
let imgWidth = SIZE[0] - sidesway * 2
let imgHeight = imgWidth / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', sidesway, position, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', sidesway, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= SIZE[1]
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
})
}
}
}
main.js中引入：
import htmlToPdf from '@/utils/htmlToPdf'
Vue.use(htmlToPdf)
vue实例中引入：
this.$getPdf('export', this.name)