Vue html输出为pdf文件

最新推荐文章于 2025-06-11 16:34:31 发布

原创最新推荐文章于 2025-06-11 16:34:31 发布 · 769 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #pdf #前端

这篇博客介绍了如何利用html2canvas和jspdf这两个JavaScript库将HTML内容转换为高质量的PDF文件。首先，通过yarn安装这两个依赖。然后，展示了如何在Vue.js环境中创建一个按钮，点击后将指定的HTML部分下载为PDF。关键步骤包括设置html2canvas的配置选项，如缩放比例、图片加载策略，以及使用jspdf创建并保存PDF。注意，转换的HTML必须在页面上可见。

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

html输出为pdf文件主要是基于html2canvas和jspdf插件完成

1、安装html2canvas和jspdf包文件

yarn add html2canvas -S

yarn add jspdf -S

2、代码片段

<template>
  <div class="canvas-container">
    <h3>canvas下载pdf</h3>
     <div class="btn">
      <el-button type="primary" @click="downloadPDF('canvas-download','PDF报告')">下载pdf</el-button>
    </div>
    <div class="download-content" id="canvas-download">
      <img src="@/assets/下载.jpg" alt="" />
    </div>
   
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import JsPDF from 'jspdf'
export default {
  data() {
    return {

    }
  },
  methods: {
    downloadPDF(id, title) {
      const element = document.getElementById(`${id}`);
      const opts = {
        scale: 6, // 缩放比例，提高生成图片清晰度，不推荐太高
        useCORS: true, // 允许加载跨域的图片
        allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用
        tainttest: true, // 检测每张图片已经加载完成
        logging: true // 日志开关，发布的时候记得改成 false
      };

      return html2canvas(element, opts).then(canvas => {
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        // 一页pdf显示html页面生成的canvas高度;
        const pageHeight = (contentWidth / 592.28) * 841.89;
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight;
        // 页面偏移
        let position = 0;
        // a4纸的尺寸[595.28,841.89]
        const imgWidth = 595.28;
        const imgHeight = (592.28 / contentWidth) * contentHeight;
        const pageData = canvas.toDataURL('image/jpeg', 1.0);
        // a4纸纵向，一般默认使用；new JsPDF('landscape'); 横向页面
        const PDF = new JsPDF('', 'pt', 'a4');
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          // addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
        } else {
          // 超过一页时，分页打印（每页高度841.89）
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + '.pdf');
      });
    }
  }
}

注：需要下载的html必须显示在页面上，如果不显示或html没有节点将不能完成下载。