前端将图表和表格导出为PDF

最新推荐文章于 2024-05-12 17:48:10 发布

duan_lily

最新推荐文章于 2024-05-12 17:48:10 发布

阅读量1k

点赞数

分类专栏：前端个人笔记文章标签： js

本文链接：https://blog.csdn.net/qq_45420916/article/details/117249762

版权

本文介绍如何使用JavaScript在前端将图表和表格转换并导出为PDF文件，涵盖关键技术和实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'

let exportTime = '';

const exportPdf = {
   
  /**
   * 1.图片清晰问题
   * 2.导出图片改造
   * pdf
   * @param {配置内容} options
   * options：{
   *  elementId：'#xxx',
   *  fileName:'文件名',
   *  type: 'pdf', 导出类型 pdf || img (默认pdf)
   *  load:false //是否下载
   *  titleData: {
   *    title1: '标题1',
   *    title2: '标题2',
   *    title3: '标题3',
   *  },
   *  exportTime: '导出时间',
   * }
   */
  export(options, eventFn) {
   
    if (!options.elementId) return;
    exportTime = options.exportTime || null;

    // 如果这个页面有左右移动,canvas 也要做响应的移动，不然会出现canvas 内容不全
    const xOffset = window.pageXOffset
    // 避免笔下误 灯下黑 统一写
    const A4_WIDTH = 592.28;
    const A4_HEIGHT = 841.89;

    const element = document.querySelector(options.elementId);
    // 根据A4的宽高计算DOM页面一页应该对应的高度
    let pageHeight = element.offsetWidth / A4_WIDTH * A4_HEIGHT;
    // 将所有不允许被截断的元素进行处理
    let wholeNodes = document.querySelectorAll('.export-chart-cont');
    for (let i = 0; i < wholeNodes.length; i++) {
   
      //1、 判断当前的不可分页元素是否在两页显示
      const topPageNum = Math.ceil((wholeNodes[i].offsetTop) / pageHeight);

      const bottomPageNum = Math.ceil((wholeNodes[i].offsetTop + wholeNodes[i].offsetHeight) / pageHeight);
      if (topPageNum !== bottomPageNum) {
   
        //说明该dom会被截断
        // 2、插入空白块使被截断元素下移
        let divParent = wholeNodes[i].parentNode
        let newBlock = document.createElement('div')
        newBlock.className = 'emptyDiv'
        newBlock.style.background = '#fff'

        // 3、计算插入空白块的高度 可以适当流出空间使得内容太靠边，根据自己需求而定
        let _H = topPageNum * pageHeight - wholeNodes[i].offsetTop
        newBlock.style.height = _H + 100 + 'px'
        divParent.insertBefore(newBlock, wholeNodes[i])
      }
    }
    let w = element.offsetWidth // 获取dom 宽度
    let h = element.offsetHeight // 获取dom 高度
    $(options.elementId).scrollTop(0);  // 只是截取可见范围以及以下的区域，所以先将滚动条置顶
    document.body.scrollTop = 0; // IE的
    document.documentElement.scrollTop = 0; // 其他
    let opts = {
   
      // x: options.x ? options.x : 400,
      // y: 100,
      width: w,
      height

最低0.47元/天解锁文章