如何在Vite项目中获取npm管理的动态字体URL供pdfMake使用？

因为Vite会对静态资源添加哈希后缀生成动态URL，仅导入CSS无法获取字体文件的处理后地址，正确做法是直接导入字体文件本身，让Vite返回处理后的URL：

步骤1：调整字体导入方式 #

不再仅导入CSS，而是直接导入@fontsource包内的字体文件（包内files目录下存放了所有字体文件）：

import pdfMake from "pdfmake/build/pdfmake";
// 导入所需的WOFF2字体文件，Vite会自动返回处理后的URL
import sourceSansNormal from "@fontsource/source-sans-pro/files/source-sans-pro-latin-400-normal.woff2";
import sourceSansItalic from "@fontsource/source-sans-pro/files/source-sans-pro-latin-400-italic.woff2";
import sourceSansBold from "@fontsource/source-sans-pro/files/source-sans-pro-latin-700-normal.woff2";
import sourceSansBoldItalic from "@fontsource/source-sans-pro/files/source-sans-pro-latin-700-italic.woff2";

// 若需要在页面中使用该字体，可保留原CSS导入（可选）
import "@fontsource/source-sans-pro/latin-400.css";
import "@fontsource/source-sans-pro/latin-400-italic.css";
import "@fontsource/source-sans-pro/latin-700.css";
import "@fontsource/source-sans-pro/latin-700-italic.css";

步骤2：配置pdfMake字体 #

将导入的字体URL变量直接赋值给pdfMake.fonts：

pdfMake.fonts = {
    SourceSans: {
        normal: sourceSansNormal,
        bold: sourceSansBold,
        italics: sourceSansItalic,
        bolditalics: sourceSansBoldItalic
    },
};

补充说明 #

• 优先使用WOFF2格式，比WOFF体积更小加载更快；若需要兼容旧浏览器，可替换为WOFF文件。
• Vite对静态资源的处理规则：导入非JS/CSS的资源时，会返回经过哈希处理的最终URL，完美适配pdfMake的字体加载需求。

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