前端导出PDF，解决中文乱码一直很头疼。要解决这个问题，需要将ttf等字体文件的内容注册到页面PDF生成器中。但是在网页没有权限直接获取客户端机器的字体文件之前，需要从服务器下载字体文件或者提示用户选择字体文件上传到页面。对于几十兆字节（M）的中文字体文件，在网络不好的情况下不是一个好的解决方案。Chrome103提高页面性能的一种方法是提示当前资源使用情况。例如，预加载文件或连接到不同的服务器。但是在服务器发送页面内容之前，浏览器无法根据提示进行操作。服务器需要数百毫秒才能生成请求的页面，并且在浏览器开始接收页面内容之前，服务器什么都不做。但是在这个等待过程中，服务端需要一些固定的子资源，比如CSS文件、JavaScript和图片内容。这时，服务器可以立即响应新的HTTP103EarlyHints状态码，要求浏览器预加载那些子资源。提供高座位效率。服务器生成页面后，它可以使用正常的HTTP200响应发送它。当页面进来的时候，浏览器已经开始加载需要的资源了。作为一个新的HTTP状态码，所以它需要更新我们的服务器。本机字体在Web上访问字体一直是一个挑战，尤其是对于允许用户创建自己的图形和设计的应用程序。现在应用程序只能使用网络字体，但无法获取用户已安装在其计算机上的字体列表；此外，无法访问完整的字体表数据，如果我们需要实现自己的自定义文本堆栈，这会很复杂。在新版本中，这个问题已经得到很好的解决。Chrome103版本中新的字体API允许Web应用程序获取用户在本地计算机上安装的所有字体信息，同时获取字体内容。调用window.queryLocalFonts()将返回用户安装的字体数组。constpickedFonts=awaitself.queryLocalFonts();for(constfontDataofpickedFonts){console.log(fontData.postscriptName);console.log(fontData.fullName);console.log(fontData.family);console.log(fontData.style);}出于安全考虑，获取字体信息需要用户授权。queryLocalFonts第一次被调用时，Chrome会弹出一个权限请求：权限通过后，你可以获取所有已安装字体的信息。使用navigator.permissions.query检查权限。异步函数requestPremission(){const{state}=awaitnavigator.permissions。查询（{名称：“本地字体”}）；console.log(state)if(state==='granted'){query();}elseif(state==='prompt'){alert("请授予权限！")query();}else{alert("Nopermissiontoobtainfonts")}}使用本地字体导出PDF接下来介绍如何使用本地字体导出PDF。选择要使用的字体内容，在PDF生成工具中注册。使用blob方法获取字体文件的内容。让currentFont=fontList[fontListSelect.value];constblob=awaitcurrentFont.blob();使用字体名称注册//Blob对象转换为ArrayBuffervarreader=newFileReader();reader.onload=function(e){varfontrrayBuffer=reader.result;varfonts=GC.Spread.Sheets.PDF.PDFFontsManager.getFont(currentFont.family)||{};字体[字体类型]=fontrrayBuffer;GC.Spread.Sheets.PDF.PDFFontsManager.registerFont(currentFont.family,fonts);}reader.readAsArrayBuffer(blob);接下来导出包含本地字体的PDF：这里注意，使用本地字体的风险也是不可避免的。如果用户没有安装相应的字体，浏览器会在网页中使用其他字体进行渲染，但PDF中仍然存在乱码的风险。解决方法是从服务器下载目标字体或者使用其他字体。延伸阅读React+Springboot+Quartz，从0实现Excel报表自动化电子表格也能当购物车吗？使用纯前端Excel表格控件SpreadJS简单三步即可构建企业现金流量表
