前端el-table导出pdf

最新推荐文章于 2025-06-27 11:18:06 发布

努力奋进的前端小菜鸟

最新推荐文章于 2025-06-27 11:18:06 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_52004060/article/details/121210720

本文介绍了如何在前端利用html2Canvas和JsPDF插件，将el-table转换为图片并进一步转化为PDF文件。通过点击按钮触发打印事件，实现了表格的PDF导出功能。

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

1、首先来看下效果图

2、使用技术：html2Canvas、JsPDF插件，mode_modules下载两个插件

npm  i  html2Canvas  JsPDF

其中，html2Canvas 负责把html转为图片，JsPDF负责把图片转为pdf文件

3、点击按钮触发打印事件

//点击按钮触发打印事件
button @click='htmlToPdf(节点ID',文件名')'>print<button>

//传入打印节点，文件名,然后调用打印事件
htmlToPdf(domName, title) {
  this.downloadPDF(domName, title)
},







//主要代码
downloadPDF(domName, title) {
  window.pageYoffset = 0;
  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;

  // 水印
  const can = this.waterMark()

    const el = document.getElementById(domName);
    return new Promise((resolve, reject) => {
      const ele = document.getElementById(domName);
  
      let eleW = ele.offsetWidth+20; // 获得该容器的宽
      //   let eleH = ele.offsetHeight // 获得该容器的高
      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.width = eleW * 2; // 将画布宽&&高放大两倍
      canvas.height = eleH * 2;
      var context = canvas.getContext("2d");
      context.scale(2, 2);
      //  context.translate(-offsetLeft - abs, -offsetTop);
      var opts = {
        scale: 2,//解决pdf不清晰问题
        // canvas: canvas,
        width: eleW,
        height: eleH,
        // logging :true,
        useCORS: true,
        background: "#FFF",
        allowTaint: false,
        // dpi: 300,
        dpi: window.devicePixelRatio * 2,
        // scale: window.devicePixelRatio *