Javascript导出Pdf功能

简介

使用html2canvas在浏览器上截取网页或部分网页的“屏幕快照”(基于DOM
然后使用jspdf实现导出Pdf文件功能

主要代码

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import dayjs from 'dayjs'

/**
 * 导出PDF
 * id:页面DOM的id 必须
 * name:文件名  必须
 * withTime:是否带时间
 */
export function exportPdf({ id, fileName, withTime = false }) {
  if (!fileName || !id) { message.error('缺少必要参数'); return }

  const target = document.getElementById(id)
  if (!target) { message.error('参数错误'); return }

  html2canvas(target, {
    // scale: window.devicePixelRatio,
    useCORS: true,
  }).then(canvas => {
    const contentWidth = canvas.width
    const contentHeight = canvas.height
    const sizeA4 = { width: 595.28, height: 841.89 }

    // 一页pdf显示html页面生成的canvas高度;
    const pageHeight = contentWidth / sizeA4.width * sizeA4.height
    // 未生成pdf的html页面高度
    let leftHeight = contentHeight
    // 页面偏移
    let position = 0
    // a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
    const imgWidth = sizeA4.width
    const imgHeight = sizeA4.width / contentWidth * contentHeight

    const pageData = canvas.toDataURL('image/jpeg', 1.0)
    const pdf = new jsPDF('', 'pt', 'a4')

    // 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
    // 当内容未超过pdf一页显示的范围,无需分页
    if (leftHeight < pageHeight) {
      pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight )
    } else {
      while(leftHeight > 0) {
        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight;
        position -= sizeA4.height
        // 避免添加空白页
        if(leftHeight > 0) {
          pdf.addPage()
        }
      }
    }
    let name = fileName
    if (withTime) name += '_' + dayjs().format('YYYYMMDDHHmmss')
    pdf.save(`${name}.pdf`)
    message.success('导出成功')
  }).catch(err => {
    message.error('导出失败,请重试')
  })
}

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: