Chrome 103支持使用本地字体，纯前端导出PDF优化

在前端导出PDF，解决中文乱码一直是一个头疼的问题。要解决这个问题，需要将ttf等字体文件内容注册到页面PDF生成器中。但是之前网页是没有权限直接获取客户机器字体文件，这时就需要从服务器下载字体文件或者提示用户选择字体文件上传到页面。对于动辄数十兆（M）的中文字体文件，网络不好时并不是一个好的解决方案。

Chrome 103

---

Chrome 103版本中新的字体API可以让web应用获取到用户在本地电脑上安装的所有字体信息，同时还可以获取到字体内容。

调用window.queryLocalFonts()，会返回用户安装字体的数组。

const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

处于安全性的考虑，获取字体信息需要获取到用户的授权。当第一调用queryLocalFonts时，Chrome会弹出权限申请：

同意后，就可以获取到所有安装字体信息了

使用navigator.permissions.query可以检查权限

async function requestPremission(){
  const { state } = await navigator.permissions.query({
    name: "local-fonts"
  });
  console.log(state)
  if (state === 'granted') {
    query();
  } else if (state === 'prompt') {
    alert("请授予权限！")
    query();
  }
  else{
    alert("没有权限获取字体")
  }
}

使用本地字体导出PDF

---

选择需要使用的字体内容，注册到PDF生成工具中

使用blob 方法可以获取字体文件内容

  let currentFont = fontList[fontListSelect.value];
  const blob = await currentFont.blob();

使用字体名称注册

//将Blob 对象转换成 ArrayBuffer
var reader = new FileReader();
reader.onload = function (e) {
  var fontrrayBuffer = reader.result;
  var fonts = GC.Spread.Sheets.PDF.PDFFontsManager.getFont(currentFont.family) || {};
  fonts[fontType] = fontrrayBuffer;
  GC.Spread.Sheets.PDF.PDFFontsManager.registerFont(currentFont.family, fonts);
}
reader.readAsArrayBuffer(blob);

导出含有本地自定义字体的PDF：

---

注意：使用本地字体也有风险，如果用户没有安装必要的字体，在网页中浏览器会用其他字体渲染但是导出PDF可能还会乱吗，这时还需要从服务器下载字体或者用其他字体文件代替。