在Tauri应用中将HTML元素转换为PDF的实践指南

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

const onGeneratePdfBrowser = () => {
  const input = document.getElementById('divToPrint');
  if (!input) {
    console.error('Element not found!');
    return;
  }

  const { clientWidth, clientHeight } = input;

  html2canvas(input, {
    width: clientWidth,
    height: clientHeight,
  }).then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    // 使用jsPDF创建一个新的PDF文档
    const pdf = new jsPDF('p', 'px', [clientWidth, clientHeight]);
    // 将HTML内容渲染为图片后添加到PDF
    pdf.addImage(imgData, 'PNG', 0, 0, clientWidth, clientHeight);
    // 在浏览器中触发下载
    pdf.save("download.pdf");
  });
};

npm install jspdf html2canvas
# 或者 yarn add jspdf html2canvas

// src-tauri/tauri.conf.json
{
  "tauri": {
    "allowlist": {
      "fs": {
        "all": true, // 或者更精细地控制
        "write_binary_file": true
      },
      "path": {
        "all": true, // 或者更精细地控制
        "document_dir": true
      }
    },
    // ... 其他配置
  }
}

import { jsPDF } from 'jspdf';
import { writeBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';
import { documentDir } from '@tauri-apps/api/path'; // 用于获取用户文档目录

/**
 * 将指定的HTML元素内容转换为PDF并保存到用户文档目录。
 * @param elementId 要转换为PDF的HTML元素ID。
 * @param outputFileName 保存的PDF文件名，默认为 'document.pdf'。
 */
const convertHtmlToPdfInTauri = async (elementId: string, outputFileName: string = 'document.pdf') => {
    const inputElement = document.getElementById(elementId);
    if (!inputElement) {
        console.error(`错误：未找到ID为 "${elementId}" 的元素。`);
        alert(`错误：未找到ID为 "${elementId}" 的元素。`);
        return;
    }

    // 初始化jsPDF
    // orientation: 'p' (portrait 纵向) 或 'l' (landscape 横向)
    // unit: 'px', 'mm', 'cm', 'in'
    // format: 'a4', 'letter', 或自定义尺寸数组 [width, height]
    const pdf = new jsPDF({
        orientation: 'p',
        unit: 'px',
        format: 'a4'
    });

    // 使用jsPDF的html方法渲染HTML元素
    // 这个方法内部会使用html2canvas将HTML渲染到canvas，然后添加到PDF。
    await pdf.html(inputElement, {
        callback: async (pdfInstance) => {
            try {
                // 获取PDF内容作为ArrayBuffer
                // 这是使用Tauri文件系统API写入二进制数据时至关重要的一步。
                const pdfData = pdfInstance.output('arraybuffer');

                // 获取用户文档目录的路径
                const targetPath = await documentDir();

                // 使用Tauri的fs API将PDF二进制数据写入文件
                // BaseDirectory.Document 指定了文件将保存在用户文档目录下
                await writeBinaryFile(outputFileName, pdfData, { dir: BaseDirectory.Document });

                console.log(`PDF已成功保存至：${targetPath}${outputFileName}`);
                alert(`PDF已成功保存至：${targetPath}${outputFileName}`);
            } catch (error) {
                console.error('保存PDF失败：', error);
                alert('保存PDF失败，请检查控制台输出及Tauri权限配置。');
            }
        },
        x: 10, // 左边距
        y: 10, // 上边距
        html2canvas: {
            scale: 0.8, // 调整缩放比例，以更好地适应页面或避免内容溢出
            useCORS: true // 如果HTML包含来自不同源的图片，请设置为true
        }
    });
};

// 示例用法（在React/Next.js组件中）：
/*
import React from 'react';

const MyPdfGeneratorComponent = () => {
    return (
        <div>
            <div id="contentToPrint" style={{ width: '800px', padding: '20px', border: '1px solid #ccc' }}>
                <h1>Tauri应用中的PDF生成</h1>
                <p>这是一个将被转换为PDF的示例内容。</p>
                <ul>
                    <li>列表项 1</li>
                    <li>列表项 2</li>
                    <li>列表项 3</li>
                </ul>
                <img src="https://via.placeholder.com/200x100" alt="示例图片" style={{ maxWidth: '100%' }} />
                <p>更多文本内容...</p>
            </div>
            <button onClick={() => convertHtmlToPdfInTauri('contentToPrint', '我的Tauri文档.pdf')}>
                生成并保存PDF
            </button>
        </div>
    );
};

export default MyPdfGeneratorComponent;
*/