JS/React场景下已上色SVG转换为可打印PDF文件下载的实现问题

你可以使用jsPDF搭配svg2pdf.js扩展纯前端完成SVG到PDF的转换，保留矢量特性适配打印需求，修改后的代码如下：

首先引入对应依赖（可选择本地npm安装或者引入公开CDN资源）：

# npm 安装命令
npm install jspdf svg2pdf.js

修改你的下载函数逻辑：

import { jsPDF } from "jspdf";
import "svg2pdf.js";

download = async () => {
  const svgEl = $("#esfalgie")[0];
  // 获取SVG实际宽高，也可以手动指定为A4等打印标准尺寸
  const svgWidth = svgEl.viewBox.baseVal.width || svgEl.width.baseVal.value;
  const svgHeight = svgEl.viewBox.baseVal.height || svgEl.height.baseVal.value;
  // 初始化PDF，单位用pt保证打印尺寸准确，尺寸和SVG匹配
  const pdf = new jsPDF({
    orientation: svgWidth > svgHeight ? 'landscape' : 'portrait',
    unit: 'pt',
    format: [svgWidth, svgHeight]
  });
  // 把SVG渲染到PDF中
  await pdf.svg(svgEl);
  // 下载PDF
  pdf.save("涂色作品.pdf");
}

注意事项 #

• 转换前请确保SVG的width、height、viewBox属性设置正确，不要使用百分比等相对单位，避免打印时尺寸错乱
• 如果SVG内包含外部字体、图片资源，需要提前将资源转成base64内嵌到SVG代码中，否则转换后会出现资源缺失
• 如果需要适配A4等固定打印纸张尺寸，可以把format参数改成'a4'，再调整SVG的缩放比例适配纸张大小，避免内容被截断

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