利用html2Canvas和JsPDF 做不分页导出页面为PDF格式

最新推荐文章于 2024-08-16 19:09:54 发布

MYD_Z

最新推荐文章于 2024-08-16 19:09:54 发布

阅读量322

点赞数 2

文章标签： pdf javascript vue.js

本文链接：https://blog.csdn.net/MYD_Z/article/details/139140885

版权

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  install(Vue) {
    Vue.prototype.getPdf = function (pdfDom, title) {
      const domRef = document.querySelector('#' + pdfDom)
      const scale = 2
      const opts = {
        useCORS: true, // 允许跨域图片
        allowTaint: true, // 允许跨域图片
        logging: true,
        width: domRef.scrollWidth,
        height: domRef.scrollHeight,
        windowHeight: domRef.scrollHeight,
        dpi: window.devicePixelRatio * scale
      }
      html2Canvas(domRef, opts).then((canvas) => {
        const contentWidth = canvas.width
        const contentHeight = canvas.height

        /* 导出不分页处理 */
        const pageData = canvas.toDataURL('image/jpeg', 1.0)

        const pdfWidth = (contentWidth + 100) / 2 * 0.75
        const pdfHeight = (contentHeight + 200) / 2 * 0.75 // 500为底部留白

        const imgWidth = (contentWidth / 2 * 0.75)
        const imgHeight = (contentHeight / 2 * 0.75) // 内容图片这里不需要留白的距离

        const PDF = new JsPDF('', 'pt', [pdfWidth, pdfHeight, ])
        PDF.addImage(pageData, 'jpeg', 20, 0, imgWidth, imgHeight)
        PDF.save(title + '.pdf')
      })
    }
  }
}

使用的时候就是getpdf('要打印的DOM的区域比如说div里面包含的东西', ' 文件名')