在Tauri应用中将HTML元素转换为PDF并保存：利用Tauri文件系统API

npm install jspdf
# 或 yarn add jspdf

{
  "tauri": {
    "allowlist": {
      "fs": {
        "all": true,
        "writeFile": true,
        "writeBinaryFile": true,
        "readBinaryFile": true,
        "readTextFile": true,
        "readDir": true,
        "copyFile": true,
        "createDir": true,
        "removeDir": true,
        "removeFile": true,
        "renameFile": true,
        "exists": true
      }
    },
    // ... 其他配置
  }
}

import { fs } from '@tauri-apps/api';
import { jsPDF } from 'jspdf';
import React, { useRef } from 'react';

const PdfGenerator: React.FC = () => {
  const divToPrintRef = useRef<HTMLDivElement>(null);

  const onGeneratePdf = async () => {
    if (!divToPrintRef.current) {
      console.error("要打印的HTML元素未找到。");
      return;
    }

    // 可以是DOM元素，也可以是HTML字符串
    const inputElement = divToPrintRef.current;

    const pdf = new jsPDF('p', 'pt', 'a4'); // 'p' for portrait, 'pt' for points, 'a4' for A4 size

    // 使用jsPDF的html方法直接渲染HTML内容
    // callback函数在HTML内容渲染到PDF后执行
    pdf.html(inputElement, {
      callback: async (generatedPdf) => {
        try {
          // 获取PDF的二进制数据
          // output()方法可以接受不同的类型参数，如'datauristring'、'blob'等
          // 默认不带参数时，返回Uint8Array，适合写入二进制文件
          const pdfData = generatedPdf.output();

          // 定义文件名和保存目录
          const fileName = 'generated_document.pdf';
          // 使用Tauri的BaseDirectory.Document，将文件保存到用户文档目录
          // 也可以选择其他目录，如BaseDirectory.Download, BaseDirectory.AppLocalData等
          const savePath = { dir: fs.BaseDirectory.Document };

          // 使用Tauri的writeBinaryFile将PDF数据写入文件
          await fs.writeBinaryFile(fileName, pdfData, savePath);

          alert(`PDF文件已成功保存到 ${fileName} (文档目录)`);
        } catch (error) {
          console.error("保存PDF文件时发生错误:", error);
          alert(`保存PDF文件失败: ${error.message}`);
        }
      },
      x: 10, // 左边距
      y: 10, // 上边距
      html2canvas: {
        scale: 0.8, // 调整缩放以适应PDF页面，根据实际内容调整
        useCORS: true // 如果HTML中包含跨域图片，请启用此项
      }
    });
  };

  return (
    <div>
      <div id="divToPrint" ref={divToPrintRef} style={{ padding: '20px', border: '1px solid #ccc' }}>
        <h1>这是一个标题</h1>
        <p>这是要转换为PDF的一些段落内容。</p>
        <ul>
          <li>列表项 1</li>
          <li>列表项 2</li>
        </ul>
        <img src="https://via.placeholder.com/150" alt="Placeholder" style={{ width: '100px', height: '100px' }} />
        <p>更多的文本内容，确保其能够被正确渲染。</p>
      </div>
      <button onClick={onGeneratePdf}>生成并保存PDF</button>
    </div>
  );
};

export default PdfGenerator;