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


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

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

Chrome 103

提高页面性能的一种方法是对当前的使用资源进行提示 。例如,预加载文件或连接到不同的服务器 。

但是在服务器发送页面内容之前,浏览器是无法对提示采取行动 。
服务器需要几百毫秒才能生成一个请求页面,在浏览器开始接收页面内容之前 , 服务器是不进行任何处理的 。但是在这个等待的过程中,服务器需要一些固定子资源,例如 CSS 文件、JavaScript 和图像内容,这个时候服务器可以立即响应新的 HTTP 103 Early Hints 状态代码,并询问浏览器预加载那些子资源,以提高效率 。
一旦服务器生成了页面,它就可以用正常的 HTTP 200 响应发送它 。当页面进入时,浏览器已经开始加载所需的资源 。作为一个新 HTTP 状态代码,它需要更新我们服务器 。

本地字体访问

Web 上的字体对用户来说一直是一个挑战,尤其是允许用户创建自己的图形和设计应用程序,就是一个难点 。现在应用程序只能使用网络字体,但无法获得用户在其计算机上安装的字体列表;而且无法访问完整的字体表数据,如果我们需要实现自己的自定义文本堆栈,就很复杂 。
而在新版本中,这个问题得到了很好解决 。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会弹出权限申请:
Chrome 103支持使用本地字体,纯前端导出PDF优化

(弹窗权限)
权限同意后,就可以获取所有安装字体的信息 。
Chrome 103支持使用本地字体,纯前端导出PDF优化

(安装字体信息)
使用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导出 。
选择需要使用的字体内容,注册到PDF生成工具中 。
Chrome 103支持使用本地字体,纯前端导出PDF优化

(将所需字体注册)
使用blob 方法可以获取字体文件内容 。
let currentFont = fontList[fontListSelect.value];const blob = await currentFont.blob();
使用字体名称注册 。
//将Blob 对象转换成 ArrayBuffervar 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:
Chrome 103支持使用本地字体,纯前端导出PDF优化

(导出PDF展示)
【Chrome 103支持使用本地字体,纯前端导出PDF优化】这里需要注意,使用本地字体风险也是不可避免的,如果用户没有安装对应字体 , 在网页中浏览器会使用其他字体进行渲染,倒是PDF依旧会有出现乱码的风险,解决方法是需要从服务器中下载目标字体或使用其他字体作为替代 。

相关经验推荐