html转pdf

需要html2canvas、jspdf两个插件

安装依赖

npm install html2canvas
npm install jspdf

 

 

代码内容

 

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
import { Loading } from 'element-ui'
let loading

export default {
  install(Vue, options) {
    Vue.prototype.exportPdfHandler = function (el, title, imgtype) {
      loading = Loading.service({
        lock: true,
        text: '正在导出...',
        background: 'rgba(0,0,0,.5)',
      })
      // el 要导出元素的id
      // title 文件名称
      // imgtype 图片类型 默认png
      let imgType = imgtype ? imgtype : 'png'
      let element = document.getElementById(el)
      window.pageYOffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      html2Canvas(element, {
        logging: false,
        useCORS: true,
        allowTaint: true,
        height: element.scrollHeight + element.clientHeight,
        windowHeight: element.scrollHeight + element.clientHeight,
        scrollY: 0,
      }).then(function (canvas) {
        let leftHeight = canvas.height
        let a4Width = 555.28
        let a4Height = 801.89

        let a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)

        let position = 0
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let pdf = new JsPDF('x', 'pt', 'a4')
        let index = 1
        let canvas1 = document.createElement('canvas')
        let height
        pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')

        function createImpl(canvas) {
          if (leftHeight > 0) {
            index++
            let checkCount = 0
            if (leftHeight > a4Height) {
              let i = position + a4HeightRef
              for (i = position + a4HeightRef; i >= position; i--) {
                let isWrite = true
                for (let j = 0; j < canvas.width; j++) {
                  let c = canvas.getContext('2d').getImageData(j, i, 1, 1).data
                  if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
                    isWrite = false
                    break
                  }
                }
                if (isWrite) {
                  checkCount++
                  if (checkCount >= 10) break
                } else {
                  checkCount = 0
                }
              }
              height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef)
              if (height <= 0) {
                height = a4HeightRef
              }
            } else {
              height = leftHeight
            }

            canvas1.width = canvas.width
            canvas1.height = height
            let ctx = canvas1.getContext('2d')
            ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height)
            let pageHeight = Math.round((a4Width / canvas.width) * height)
            if (position != 0) {
              pdf.addPage()
            }
            // 设置20px 边距
            pdf.addImage(
              canvas1.toDataURL('image/jpeg', 1.0),
              'JPEG',
              20,
              20,
              a4Width,
              (a4Width / canvas1.width) * height
            )
            leftHeight -= height
            position += height
            if (leftHeight > 0) {
              setTimeout(createImpl, 500, canvas)
            } else {
              pdf.deletePage(index - 1)
              pdf.save(title + '.pdf')
            }
          }
        }
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < a4HeightRef) {
          pdf.addImage(pageData, 'JPEG', 10, 10, a4Width, (a4Width / canvas.width) * leftHeight)
          pdf.save(title + '.pdf')
        } else {
          try {
            pdf.deletePage(0)
            setTimeout(createImpl, 300, canvas)
          } catch (error) {
            console.log(error)
          }
        }
        setTimeout(() => {
          loading.close()
          setTimeout(() => {
            window.$app.$message.success('导出成功')
          }, 500)
        }, 2000)
      })
    }
  },
}

 

 

使用

<div id="htmlexport">
内容
</div>
this.exportPdfHandler('htmlexport', ‘title’)

 

 

借鉴于此基础上修改了些：https://blog.csdn.net/weixin_45295262/article/details/117041018?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-117041018-blog-124343421.pc_relevant_multi_platform_whitelistv1&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-117041018-blog-124343421.pc_relevant_multi_platform_whitelistv1&utm_relevant_index=1