首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue实现HTML转PDF

在Vue项目中实现HTML转PDF功能的详细步骤

2025-04-24 10:44:09 作者：前端日常开发

在如今的项目开发过程中,将 HTML 页面转换为 PDF 格式是一种常见的需求,无论是出于保存、打印还是分享的目的,这一功能都能为我们带来诸多便利,今天,就让我们一起深入探讨如何在 Vue 项目中轻松实现 HTML 转 PDF 的功能,需要的朋友可以参考下

前言

在如今的项目开发过程中，将 HTML 页面转换为 PDF 格式是一种常见的需求。无论是出于保存、打印还是分享的目的，这一功能都能为我们带来诸多便利。今天，就让我们一起深入探讨如何在 Vue 项目中借助 html2canvas 和 jspdf 这两个强大的工具，轻松实现 HTML 转 PDF 的功能，并确保内容能够完整地呈现在一页 PDF 中。

一、前期准备：搭建环境

在开始之前，我们需要确保开发环境中已经安装了必要的依赖库。打开终端，进入到项目的根目录，然后运行以下命令来安装 html2canvas 和 jspdf：

npm install html2canvas jspdf

这两个库分别负责将 HTML 元素转换为 canvas 图像，以及将 canvas 图像进一步处理并生成 PDF 文件。

二、封装转 PDF 工具：核心逻辑的实现

为了使代码更加模块化和易于维护，我们可以在项目的 utils 目录下创建一个名为 htmlToPdf.js 的文件。在这个文件中，我们将封装 HTML 转 PDF 的核心逻辑。

import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';

export default {
  install(Vue, options) {
    Vue.prototype.ExportSavePdf = function (domId, fileName = 'download') {
      const element = document.getElementById(domId);
      html2canvas(element, {
        logging: false,
        scale: 2, // 缩放因子，提高图片清晰度
      }).then((canvas) => {
        const contentWidth = element.offsetWidth; // 获取元素宽度
        const contentHeight = element.offsetHeight; // 获取元素高度
        const pageData = canvas.toDataURL('image/jpeg', 1.0); // 将 canvas 转换为 base64 图片格式

        // 设置 PDF 的尺寸
        const pdfWidth = (contentWidth * 0.75) / 2; // 转换为 pt 单位
        const pdfHeight = (contentHeight * 0.75) / 2 + 15; // 加上一定的底部留白

        // 初始化 jsPDF
        const pdf = new jsPDF('', 'pt', [pdfWidth, pdfHeight]);

        // 计算图片在 PDF 中的位置和尺寸
        const imgWidth = pdfWidth - 20; // 图片宽度减去左右边距
        const imgHeight = (contentHeight * imgWidth) / contentWidth; // 根据图片宽高比计算图片高度
        pdf.addImage(pageData, 'JPEG', 10, 10, imgWidth, imgHeight); // 将图片添加到 PDF 中
        pdf.save(`${fileName}.pdf`); // 保存 PDF 文件
      });
    };
  },
};

在这里，我们首先通过 document.getElementById 获取到需要转换的 HTML 元素。接着，使用 html2canvas 将其转换为 canvas 图像。然后，我们将 canvas 图像转换为 base64 格式的图片数据，并根据元素的实际尺寸设置 PDF 的大小。最后，利用 jsPDF 将图片添加到 PDF 中，并保存文件。

三、全局注册：使功能随处可用

为了在整个 Vue 项目中都能方便地使用这个转 PDF 的功能，我们需要在 main.js 文件中进行全局注册。

import Vue from 'vue';
import App from './App.vue';
import htmlToPdf from './utils/htmlToPdf';

Vue.config.productionTip = false;

Vue.use(htmlToPdf);

new Vue({
  render: (h) => h(App),
}).$mount('#app');

通过这一步，我们就将 ExportSavePdf 方法注册为了 Vue 的原型方法，可以在任何组件中直接调用。

四、组件中使用

现在，我们可以在需要使用该功能的 Vue 组件中轻松地调用 ExportSavePdf 方法了。

<template>
  <div>
    <div id="contentToConvert">
      <h1>这是要转换的内容</h1>
      <p>你可以在这里放置任何需要转换为 PDF 的 HTML 元素。无论是文字、图片还是表格，都可以一键转换为 PDF 格式，方便分享和保存。</p>
      <img src="https://via.placeholder.com/150" alt="示例图片">
      <table>
        <tr>
          <th>项目</th>
          <th>描述</th>
        </tr>
        <tr>
          <td>html2canvas</td>
          <td>用于将 HTML 元素转换为 canvas 图像</td>
        </tr>
        <tr>
          <td>jsPDF</td>
          <td>用于将 canvas 图像转换为 PDF 文件</td>
        </tr>
      </table>
    </div>
    <el-button type="primary" @click="exportToPdf">导出为 PDF</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    exportToPdf() {
      this.ExportSavePdf('contentToConvert', '我的PDF文档');
    },
  },
};
</script>

在这个示例中，我们定义了一个包含文字、图片和表格的 HTML 结构，并将其 ID 设置为 "contentToConvert"。当用户点击 "导出为 PDF" 按钮时，就会触发 exportToPdf 方法，进而调用 ExportSavePdf 方法，将指定的 HTML 内容转换为 PDF 文件并保存。

五、优化与拓展：提升用户体验

虽然基本功能已经实现，但我们还可以进行一些优化和拓展，以提升用户体验。

优化 PDF 样式

我们可以通过调整 css 样式，使生成的 PDF 文件更加美观。例如，设置页面的边距、字体样式、颜色等。

#contentToConvert {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
}

#contentToConvert h1 {
  color: #0066cc;
  text-align: center;
}

#contentToConvert table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

#contentToConvert table th,
#contentToConvert table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

#contentToConvert table th {
  background-color: #f2f2f2;
}

支持多页面 PDF

如果需要转换的内容较多，一页 PDF 无法完全展示，我们可以对代码进行扩展，支持生成多页面 PDF。

html2canvas(element, {
  logging: false,
  scale: 2,
}).then((canvas) => {
  const contentWidth = element.offsetWidth;
  const contentHeight = element.offsetHeight;
  const pageData = canvas.toDataURL('image/jpeg', 1.0);

  const pdfWidth = (contentWidth * 0.75) / 2;
  const pdfHeight = (contentHeight * 0.75) / 2 + 15;

  const pdf = new jsPDF('', 'pt', [pdfWidth, pdfHeight]);

  const imgWidth = pdfWidth - 20;
  const imgHeight = (contentHeight * imgWidth) / contentWidth;

  // 计算需要多少页
  const totalPages = Math.ceil(imgHeight / pdfHeight);

  for (let i = 0; i < totalPages; i++) {
    const pageY = i * pdfHeight;
    pdf.addImage(pageData, 'JPEG', 10, 10 + pageY, imgWidth, imgHeight);
    if (i < totalPages - 1) {
      pdf.addPage();
    }
  }

  pdf.save(`${fileName}.pdf`);
});

在这个拓展版本中，我们首先计算出需要生成的页面数量，然后循环将每一页的内容添加到 PDF 中。

通过以上步骤，我们不仅实现了基本的 HTML 转 PDF 功能，还对其进行了一些优化和拓展，使其更加实用和易用。

到此这篇关于在Vue项目中实现HTML转PDF功能的详细步骤的文章就介绍到这了,更多相关Vue实现HTML转PDF内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！