当前位置：首页 > 文章列表 > 文章 > 前端 > Tauri中HTML转PDF保存方法

Tauri中HTML转PDF保存方法

2025-10-18 08:18:31 0浏览收藏

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《Tauri中HTML转PDF并保存本地方法》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

在 Tauri 应用中将 HTML 元素转换为 PDF 并保存到本地文件

本文旨在解决在 Tauri 应用中，传统浏览器环境下使用 jsPDF.save() 方法无法将 HTML 转换为 PDF 并保存的问题。我们将详细介绍如何利用 Tauri 的文件系统 (fs) API 结合 jsPDF 的 output() 方法，实现 HTML 内容到 PDF 的高效转换与本地文件保存，并提供完整的代码示例和配置指导。

1. 浏览器环境下的 HTML 到 PDF 转换

在标准的 Web 浏览器环境中，将 HTML 元素转换为 PDF 通常涉及 html2canvas 和 jsPDF 这两个库的组合。html2canvas 负责将 HTML 元素渲染成 Canvas 图像，然后 jsPDF 将该图像添加到 PDF 文档中，并最终通过浏览器的下载机制保存文件。

以下是典型的浏览器端实现代码：

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

const onGeneratePdf = () => {
  const input = document.getElementById('divToPrint'); // 假设这是要打印的HTML元素
  if (!input) {
    console.error("Element with ID 'divToPrint' not found.");
    return;
  }

  const { clientWidth, clientHeight } = input;

  html2canvas(input, {
    width: clientWidth,
    height: clientHeight,
    scale: 2 // 提高分辨率，防止模糊
  }).then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    // 创建一个与元素尺寸匹配的PDF
    const pdf = new jsPDF('p', 'px', [clientWidth, clientHeight]);

    // 将图像添加到PDF
    pdf.addImage(imgData, 'PNG', 0, 0, clientWidth, clientHeight);
    // 在浏览器中触发下载
    pdf.save("download.pdf");
  }).catch(error => {
    console.error("Error generating PDF in browser:", error);
  });
};

// 假设有一个按钮触发此函数
// <button onClick={onGeneratePdf}>生成PDF (浏览器)</button>

这段代码在浏览器中运行完美，pdf.save() 方法会提示用户下载生成的 PDF 文件。然而，当这段代码被移植到 Tauri 桌面应用中时，pdf.save() 方法将无法正常工作。

2. Tauri 应用中的挑战

Tauri 应用程序运行在一个隔离的 Webview 环境中，与浏览器有本质区别。出于安全考虑，Webview 默认没有直接访问用户本地文件系统的权限。jsPDF.save() 方法依赖于浏览器提供的下载机制，而 Tauri 应用的 Webview 并不具备这种机制来直接保存文件到用户硬盘。因此，我们需要一种Tauri特有的方式来处理文件保存。

3. Tauri 集成解决方案：利用文件系统 API

为了在 Tauri 应用中实现文件保存功能，我们需要使用 Tauri 提供的文件系统 (fs) API。这个 API 允许 Webview 与底层操作系统进行交互，从而实现文件的读写操作。

此外，对于 HTML 到 PDF 的转换，jsPDF 库本身提供了 pdf.html() 方法，它通常比 html2canvas + pdf.addImage() 的组合在处理复杂布局和文本时提供更好的渲染效果。pdf.html() 可以直接将 HTML 字符串或 DOM 元素渲染到 PDF 中。

以下是使用 Tauri 文件系统 API 和 jsPDF.html() 的解决方案：

3.1 引入 Tauri 文件系统 API

首先，确保你的 Tauri 项目中安装了 @tauri-apps/api，并在需要的地方导入 fs 模块：

// 对于 JavaScript (Vanilla JS / React JS)
import { writeBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';

// 对于 TypeScript
// import { writeBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';

3.2 核心代码实现

import { jsPDF } from 'jspdf';
import { writeBinaryFile, BaseDirectory } from '@tauri-apps/api/fs'; // 导入Tauri文件系统API

const onGeneratePdfInTauri = async () => {
  const inputElement = document.getElementById('divToPrint'); // 获取要转换的HTML元素
  if (!inputElement) {
    console.error("Element with ID 'divToPrint' not found.");
    return;
  }

  const pdf = new jsPDF('p', 'px', 'a4'); // 创建一个A4尺寸的PDF文档

  try {
    // 使用 jsPDF.html() 方法直接将 HTML 元素渲染到 PDF
    await pdf.html(inputElement, {
      callback: async (pdfInstance) => {
        // 获取 PDF 的二进制数据
        const pdfOutput = pdfInstance.output();

        // 使用 Tauri 的 writeBinaryFile API 将 PDF 数据保存到文件
        // 'download.pdf' 是文件名
        // pdfOutput 是 PDF 的二进制数据
        // { dir: BaseDirectory.Document } 指定保存到用户文档目录
        await writeBinaryFile('download.pdf', pdfOutput, { dir: BaseDirectory.Document });

        console.log('PDF saved successfully to Documents folder!');
        alert('PDF已成功保存到文档目录！');
      },
      x: 10, // 左边距
      y: 10, // 上边距
      html2canvas: {
        scale: 0.8 // 调整缩放以适应A4页面，根据内容调整
      }
    });
  } catch (error) {
    console.error("Error generating or saving PDF in Tauri:", error);
    alert('生成或保存PDF时发生错误！');
  }
};

// 假设有一个按钮触发此函数
// <button onClick={onGeneratePdfInTauri}>生成PDF (Tauri)</button>

3.3 关键配置：Tauri 文件系统权限

为了让 Tauri 应用能够写入文件到本地文件系统，你必须在 tauri.conf.json 文件中配置相应的权限。在 tauri > allowlist > fs 部分添加 allow-write：

// tauri.conf.json
{
  "tauri": {
    "allowlist": {
      "fs": {
        "all": false,
        "read": true,
        "write": true,
        "create": true,
        "delete": false,
        "exists": true,
        "scope": [
          "$DOCUMENT/**" // 允许访问用户文档目录及其子目录
        ]
      },
      "shell": {
        "all": false,
        "open": true
      }
      // ... 其他允许列表配置
    },
    // ... 其他 Tauri 配置
  }
}

重要提示：

"write": true 是允许写入文件的关键。
"scope": ["$DOCUMENT/**"] 限制了文件操作的范围，这里允许在用户文档目录 ($DOCUMENT) 下进行读写操作。你可以根据需求更改或添加其他 BaseDirectory。

4. 注意事项与最佳实践

jsPDF.html() 与 html2canvas 的选择：
- jsPDF.html()：直接渲染 HTML 结构，通常能更好地保留文本、样式和复杂布局，但可能对某些 CSS 属性支持不完善。它内部也可能使用 html2canvas 或类似技术，但提供了更高级的抽象。
- html2canvas：将 HTML 渲染成图像，再将图像添加到 PDF。优点是所见即所得，但文本可能变成图片，导致 PDF 文件大小增大，且无法选中或搜索文本。对于简单布局或需要精确视觉复制的场景适用。
- 在大多数情况下，尤其是有大量文本和需要保持可搜索性的 PDF，推荐使用 jsPDF.html()。
PDF 页面尺寸与内容缩放： jsPDF.html() 方法中的 html2canvas.scale 选项非常重要，它决定了 HTML 内容如何缩放以适应 PDF 页面。你需要根据实际 HTML 内容的尺寸和目标 PDF 页面（如 A4）进行调整，以避免内容溢出或过小。
错误处理： 在实际应用中，务必添加 try...catch 块来捕获文件写入或 PDF 生成过程中可能发生的错误，并向用户提供有意义的反馈。
文件路径与目录： BaseDirectory 枚举提供了多种预定义的系统目录（如 Document, Download, Home 等）。选择最适合你应用场景的目录来保存文件。如果需要让用户选择保存位置，可以结合 Tauri 的 dialog API 实现。
用户体验： 在文件保存成功后，可以考虑使用 Tauri 的 shell API 打开保存文件的目录，方便用户查找。

5. 总结

在 Tauri 应用中，直接使用 jsPDF.save() 方法是行不通的。正确的做法是利用 jsPDF.output() 方法获取生成的 PDF 的二进制数据，然后结合 Tauri 提供的文件系统 API (fs.writeBinaryFile) 将这些数据写入本地文件。同时，不要忘记在 tauri.conf.json 中配置相应的文件写入权限。通过这种方式，你可以可靠地在 Tauri 桌面应用中实现 HTML 内容到 PDF 的转换与本地文件保存功能。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Tauri中HTML转PDF保存方法》文章吧，也可关注golang学习网公众号了解相关技术文章。