在 Tauri 应用中将 HTML 元素转换为 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>

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

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

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>

// 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 配置
  }
}