Tauri 应用中 HTML 元素转换为 PDF 的实现指南

在现代 Web 应用开发中，将页面内容或特定 HTML 元素导出为 PDF 是一项常见需求。对于基于浏览器运行的应用，通常可以利用 html2canvas 库将 HTML 渲染为 Canvas 图像，再结合 jsPDF 库将 Canvas 图像添加到 PDF 文档中，并通过 jsPDF.save() 方法触发浏览器下载。这种方法在标准浏览器环境中运作良好，但当我们将应用打包为 Tauri 桌面应用时，会遇到兼容性问题。

浏览器中的常见实现与局限

在浏览器环境中，将 HTML 元素转换为 PDF 的典型流程如下：

1. 捕获 HTML 元素： 使用 html2canvas 库将指定的 HTML 元素渲染成一个 Canvas 图像。
2. 创建 PDF 文档： 使用 jsPDF 库创建一个新的 PDF 文档。
3. 添加图像到 PDF： 将 html2canvas 生成的 Canvas 图像转换为数据 URL，并将其作为图像添加到 jsPDF 文档中。
4. 保存 PDF： 调用 pdf.save() 方法，触发浏览器下载 PDF 文件。

以下是这种方法的一个示例代码：

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

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

  const { clientWidth, clientHeight } = input;

  html2canvas(input, {
    width: clientWidth,
    height: clientHeight,
    scale: 2 // 提高分辨率，使PDF更清晰
  }).then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    // 根据元素尺寸创建PDF，确保内容不被裁剪
    const pdf = new jsPDF('p', 'px', [clientWidth, clientHeight]); 

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

尽管这段代码在浏览器中运行完美，但在 Tauri 应用中，jsPDF.save() 方法依赖于浏览器提供的下载机制，而 Tauri 作为一个桌面应用，其文件操作需要通过原生的文件系统 API 来实现。直接调用 pdf.save() 在 Tauri 中可能无法正常工作或行为不一致。

立即学习“前端免费学习笔记（深入）”；

Tauri 应用中的 PDF 导出解决方案

为了在 Tauri 应用中实现 HTML 到 PDF 的导出功能，我们需要结合 jsPDF 的渲染能力与 Tauri 原生文件系统 API 的强大功能。核心思路是：使用 jsPDF 将 HTML 内容渲染成 PDF 的二进制数据，然后利用 Tauri 的 fs 模块将这些二进制数据直接写入到用户本地的文件系统。

Eva Design System

基于深度学习的色彩生成器

86

查看详情

核心组件与实现

1. jsPDF.html() 方法： jsPDF 库提供了一个 html() 方法，可以直接将 HTML 字符串或 DOM 元素渲染到 PDF 文档中。这个方法通常比先 html2canvas 再 addImage 更方便，因为它能更好地处理文本、样式和布局。
2. pdf.output() 方法： 当 PDF 文档内容准备就绪后，可以通过 pdf.output() 方法获取 PDF 文件的二进制数据（通常是 Uint8Array 或 ArrayBuffer 格式）。
3. Tauri fs.writeBinaryFile API： Tauri 提供了 fs (Filesystem) 模块，其中的 writeBinaryFile 函数允许我们将二进制数据写入到指定的文件路径。

以下是适用于 Tauri 应用的 PDF 导出示例代码：

import { writeBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';
import { jsPDF } from 'jspdf';

/**
 * 在 Tauri 应用中将指定 HTML 元素导出为 PDF 并保存
 * @param {string} elementId 要导出为 PDF 的 HTML 元素的 ID
 * @param {string} fileName 保存的 PDF 文件名
 */
const generatePdfInTauri = async (elementId: string, fileName: string = 'document.pdf') => {
  const inputElement = document.getElementById(elementId);
  if (!inputElement) {
    console.error(`Element with ID '${elementId}' not found.`);
    return;
  }

  // 创建 jsPDF 实例，指定页面大小为 A4，单位为像素
  const pdf = new jsPDF('p', 'px', 'a4');

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

        // 使用 Tauri 的文件系统 API 将二进制数据写入文件
        // BaseDirectory.Document 表示写入到用户文档目录
        await writeBinaryFile(fileName, pdfOutput, { dir: BaseDirectory.Document });
        console.log(`PDF saved successfully to Documents folder as ${fileName}`);
        alert(`PDF 已成功保存到您的文档目录：${fileName}`);
      } catch (error) {
        console.error('Failed to save PDF:', error);
        alert(`保存 PDF 失败：${error.message || error}`);
      }
    },
    x: 10, // 可选：内容在页面上的 x 坐标偏移
    y: 10, // 可选：内容在页面上的 y 坐标偏移
    // html2canvas 选项，jsPDF.html 内部可能会使用 html2canvas
    html2canvas: {
      scale: 0.8, // 调整渲染比例以适应页面或提高清晰度
      logging: false // 关闭 html2canvas 的日志
    }
  });
};

// 在 Next.js 或 React 组件中调用示例
// <button onClick={() => generatePdfInTauri('myContentDiv', 'report.pdf')}>生成 PDF</button>

这段代码首先获取目标 HTML 元素，然后通过 jsPDF.html() 方法将其内容渲染到 PDF 文档中。在渲染完成后，callback 函数会被调用，我们在这里获取 PDF 的二进制输出，并利用 Tauri 的 writeBinaryFile 函数将其保存到用户文档目录下的指定文件。

实施步骤与配置要点

1. 安装依赖： 确保项目中已安装 jspdf。如果 jsPDF.html() 内部需要 html2canvas 进行更复杂的渲染，也请安装 html2canvas。

   npm install jspdf
   # 如果需要，也安装 html2canvas
   # npm install html2canvas

   登录后复制

2. Tauri 文件系统权限配置： 为了允许 Tauri 应用访问文件系统并写入文件，您需要在 src-tauri/tauri.conf.json 文件中配置 allowlist。至少需要授予 fs.writeBinaryFile 权限。为了简便，可以暂时开启 fs.all，但在生产环境中建议精细控制权限。

   {
     "tauri": {
       "allowlist": {
         "fs": {
           "all": true, // 允许所有文件系统操作，开发阶段方便
           // 或者更精细地控制：
           // "writeFile": true,
           // "writeBinaryFile": true,
           // "readDir": false,
           // ...
         }
       },
       "windows": [
         {
           "title": "My Tauri App",
           "width": 800,
           "height": 600
         }
       ]
     },
     "package": {
       "productName": "my-tauri-app"
     },
     "build": {
       "devPath": "../",
       "distDir": "../out"
     }
   }

   登录后复制

   修改配置后，请确保重新构建或重启 Tauri 应用以使更改生效。

3. 前端调用： 在您的 Next.js 或其他前端框架组件中，导入并调用 generatePdfInTauri 函数，通常绑定到一个按钮的点击事件上。

注意事项

• 权限管理： 务必仔细配置 tauri.conf.json 中的文件系统权限。过度宽松的权限可能带来安全风险。在生产环境中，应只授予应用所需的最小权限。
• 错误处理： 在实际应用中，应加入更完善的错误捕获和用户反馈机制。例如，当文件保存失败时，向用户显示友好的错误消息。
• TypeScript 兼容性： 如果您的项目使用 TypeScript，请确保正确导入 jsPDF 和 Tauri fs 模块的类型定义。例如，import { jsPDF } from 'jspdf'; 和 import { writeBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';。
• HTML 渲染复杂性： jsPDF.html() 方法在处理复杂的 CSS 样式、JavaScript 驱动的动态内容或第三方组件时，可能不如浏览器原生渲染效果完美。您可能需要调整 html2canvas 的 scale 选项（在 jsPDF.html 的配置中），或对 HTML 结构和样式进行优化，以获得最佳的 PDF 渲染效果。
• 用户体验： 默认将文件保存到 BaseDirectory.Document 目录可能不是最佳的用户体验。Tauri 提供了 tauri::dialog::save API，允许您打开一个文件保存对话框，让用户选择保存路径和文件名，这会大大提升用户体验。

总结

在 Tauri 桌面应用中将 HTML 元素导出为 PDF，需要跳出传统的浏览器下载模式，转而利用 Tauri 提供的原生文件系统 API。通过结合 jsPDF 库的强大渲染能力和 Tauri fs.writeBinaryFile 的文件操作能力，我们可以构建一个稳定且兼容的解决方案。理解并正确配置 Tauri 的权限设置，以及对 jsPDF.html() 渲染细节的把握，是成功实现此功能的关键。

以上就是Tauri 应用中 HTML 元素转换为 PDF 的实现指南的详细内容，更多请关注php中文网其它相关文章！