使用vue-to-pdf导出PDF时字体样式失效问题求助

核心原因 #

Broadway 并非跨平台通用的系统预装字体，导出工具无法自动识别并加载该字体；同时 vue-to-pdf 依赖的底层库（html2canvas/jsPDF）需要确保字体完全加载后再执行导出。

解决步骤 #

1. 正确引入字体文件

   • 下载 Broadway 字体文件（如 .ttf 格式），将其放入项目的静态资源目录（例如 public/fonts）
   • 在全局样式或组件样式中通过 @font-face 声明字体：

     @font-face {
       font-family: 'Broadway';
       src: url('/fonts/Broadway.ttf') format('truetype');
       font-weight: normal;
       font-style: italic;
     }
     
     .container-text {
       font-family: 'Broadway', sans-serif; /* 添加 fallback 字体避免失效 */
       font-style: italic;
     }
     

2. 确保字体加载完成后再导出
   修改导出方法，等待浏览器字体加载完成后再执行导出操作：

   async downloadPdf() {
     await document.fonts.ready;
     this.$PDFSave(this.$refs['box'], 'pdf')
   }
   

3. 验证页面显示效果
   先确认页面中的文本已经正确显示为 Broadway 字体，如果页面上都不生效，优先排查字体路径、@font-face 配置是否正确。

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