如何在Tauri+Next.js应用中将HTML元素转换为PDF？

你的代码在浏览器中正常是因为jsPDF的save()方法依赖浏览器原生下载弹窗，但Tauri的webview环境不支持这一行为，需要结合Tauri的API适配，下面提供两种可行方案：

方案一：修改原有代码适配Tauri #

步骤1：配置Tauri权限 #

在tauri.conf.json中添加文件写入和保存对话框的权限：

"tauri": {
  "allowlist": {
    "fs": {
      "write": true,
      "scope": ["$HOME/*", "$DESKTOP/*"] // 可根据需求调整允许的路径范围
    },
    "dialog": {
      "save": true
    }
  }
}

步骤2：替换保存逻辑 #

使用Tauri的文件系统和对话框API替代pdf.save()，代码如下：

import { writeFile, save } from '@tauri-apps/api/fs';

const onGeneratePdf = async () => {
  const input = document.getElementById('divToPrint')!;
  const { clientWidth, clientHeight } = input;

  const canvas = await html2canvas(input, {
    width: clientWidth,
    height: clientHeight,
  });
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF('p', 'px', [clientWidth, clientHeight]);

  pdf.addImage(imgData, 'PNG', 0, 0, clientWidth, clientHeight);
  
  // 获取PDF的二进制数据
  const pdfBuffer = new Uint8Array(pdf.output('arraybuffer'));
  // 调用保存对话框让用户选择保存路径
  const targetPath = await save({
    defaultPath: 'download.pdf',
    filters: [{ name: 'PDF文件', extensions: ['pdf'] }]
  });

  if (targetPath) {
    await writeFile(targetPath, pdfBuffer);
    alert('PDF已成功保存');
  }
}

方案二：使用Tauri原生打印API生成PDF #

这是更推荐的原生方案，无需依赖html2canvas和jsPDF，直接利用Tauri的打印能力将指定元素转为PDF：

步骤1：配置权限 #

确保tauri.conf.json中开启打印权限：

"tauri": {
  "allowlist": {
    "window": {
      "print": true
    }
  }
}

步骤2：实现代码 #

import { print } from '@tauri-apps/api/window';

const onGeneratePdf = async () => {
  const printElement = document.getElementById('divToPrint')!;
  // 临时隐藏页面其他元素，只保留要打印的内容
  const originalBodyDisplay = document.body.style.display;
  const originalElementDisplay = printElement.style.display;
  
  document.body.style.display = 'none';
  printElement.style.display = 'block';

  try {
    await print({
      silent: true,
      printBackground: true,
      pdf: {
        pageSize: { width: printElement.clientWidth, height: printElement.clientHeight }, // 匹配元素尺寸
        margins: { top: 0, bottom: 0, left: 0, right: 0 }
      },
      selector: '#divToPrint'
    });
  } catch (err) {
    console.error('生成PDF失败:', err);
  } finally {
    // 恢复页面原有显示状态
    document.body.style.display = originalBodyDisplay;
    printElement.style.display = originalElementDisplay;
  }
}

该方案利用Tauri原生渲染，生成的PDF质量更高，也避免了canvas转图的失真问题。

内容的提问来源于stack exchange，提问作者Dylan