如何根据用户选择修改转PDF的HTML文件编码？

光设置<meta charset>标签没用——这个标签只是告诉解析器"我应该用什么编码读内容"，但如果你的HTML字符串本身没按目标编码生成，或者PDF工具忽略了这个声明，编码还是会默认用UTF-8。以下是具体解决方案：

核心思路 #

要让编码生效，需要同时做到两点：

1. 把HTML内容实际转换成目标编码的二进制数据（比如UTF-16）
2. 让PDF生成工具明确使用你指定的编码来解析内容

具体实现步骤 #

1. 生成对应编码的HTML二进制数据 #

JavaScript字符串默认是UTF-16，但直接拼接的字符串传给工具时，工具可能还是按UTF-8处理。需要手动给UTF-16内容加上BOM（字节顺序标记），并转换成二进制：

// 把字符串转换成带BOM的UTF-16LE二进制数据
function convertToUtf16(str) {
  // 创建Uint16Array存储字符
  const uint16 = new Uint16Array(str.length);
  for (let i = 0; i < str.length; i++) {
    uint16[i] = str.charCodeAt(i);
  }
  // 加上UTF-16LE的BOM（FF FE）
  const bom = new Uint8Array([0xFF, 0xFE]);
  // 合并BOM和内容
  const combinedBuffer = new Uint8Array(bom.length + uint16.byteLength);
  combinedBuffer.set(bom);
  combinedBuffer.set(new Uint8Array(uint16.buffer), bom.length);
  return combinedBuffer;
}

// 生成HTML模板
const selectedEncoding = "UTF-16"; // 这里替换成下拉框选中的值
let htmlTemplate = `<!DOCTYPE html>
<head>
  <meta charset="${selectedEncoding}">
  <style>${styles}</style>
</head>
<body>${userInputContent}</body>
</html>`;

// 转换为目标编码的二进制数据
let encodedData;
if (selectedEncoding === "UTF-16") {
  encodedData = convertToUtf16(htmlTemplate);
} else {
  // UTF-8的话直接用TextEncoder
  encodedData = new TextEncoder().encode(htmlTemplate);
}

2. 让PDF工具识别编码 #

不同的PDF生成库处理方式略有不同，举两个常见例子：

用jsPDF + html2canvas

把编码后的二进制转成Blob，再传给html2canvas解析：

const blob = new Blob([encodedData], { type: `text/html;charset=${selectedEncoding}` });
const blobUrl = URL.createObjectURL(blob);

// 加载Blob并转成PDF
fetch(blobUrl)
  .then(res => res.text())
  .then(html => {
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = html;
    html2canvas(tempDiv).then(canvas => {
      const doc = new jsPDF();
      doc.addImage(canvas.toDataURL("image/png"), "PNG", 10, 10);
      doc.save("export.pdf");
      URL.revokeObjectURL(blobUrl);
    });
  });

用浏览器原生打印导出

如果是直接通过浏览器打印生成PDF，需要把带BOM的编码内容转成Blob并打开，再打印：

const blob = new Blob([encodedData], { type: `text/html;charset=${selectedEncoding}` });
const blobUrl = URL.createObjectURL(blob);
const printWindow = window.open(blobUrl);
printWindow.onload = () => {
  printWindow.print();
  setTimeout(() => {
    printWindow.close();
    URL.revokeObjectURL(blobUrl);
  }, 1000);
};

额外建议 #

• UTF-16的兼容性不如UTF-8，很多PDF工具对UTF-16的支持有限，如果特殊字符可以用HTML实体（比如&#xxxx;）或者嵌入支持特殊字符的字体来解决，优先用UTF-8更省心。
• 测试时可以先把生成的HTML保存成文件，用文本编辑器打开看编码是否正确，再确认PDF生成是否正常。

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