html2canvas导出pdf，表格导出为pdf

最新推荐文章于 2024-07-28 18:24:32 发布

原创

最新推荐文章于 2024-07-28 18:24:32 发布 · 967 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何使用HTML2Canvas和jspdf库将包含滚动条的el-table内容导出为PDF，同时过滤掉不需要的元素。通过实例代码展示如何导出HTML节点并指定隐藏节点ID，生成清晰的A4尺寸PDF文件。

导出滚动条外的表格，同时过滤不需要的元素。

1.安装插件

npm i html2canvas jspdf --save-dev

2.新建htmlpdf.js文件

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
/**
 * @param  node          要生成 pdf 的DOM元素（容器）
 * @param  padfName    PDF文件生成后的文件名字
 * */
//主要代码
function downloadPDF(node, printHide, padfName) {
  window.pageYoffset = 0;
  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;
  const el = document.querySelector(node); // 整个导出节点
  return new Promise((resolve, reject) => {
    const ele = document.querySelector(node);
    let eleW = ele.offsetWidth; // 获得该容器的宽
    let eleH = ele.offsetHeight; // 获得该容器的高
    let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
    let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
    var canvas = document.createElement("canvas");
    let scaleBy = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1;
    canvas