laravel 从脚本引用导入的字体URL

uz75evzq  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(107)

我尝试在应用程序中使用pdfmake包;为了加载字体,在初始化时提供了一个URL列表。但我的字体由npm和Vite管理,所以没有固定的URL。以下是我到目前为止的情况:

npm install @fontsource/source-sans-pro

字符串
app.js中:

import pdfMake from "pdfmake/build/pdfmake";
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"

pdfMake.fonts = {
    SourceSans: {
        normal: "", // need to provide URLs for the WOFF files
        bold: "",
        italics: "",
        bolditalics: ""
    },
};


当我运行npm run build时,我在输出中得到:

✓ 636 modules transformed.
public/build/manifest.json                                               6.12 kB
public/build/assets/source-sans-pro-latin-400-italic-500f8aaf.woff2     14.16 kB
public/build/assets/source-sans-pro-latin-700-italic-fae9ee8d.woff2     14.20 kB
public/build/assets/source-sans-pro-latin-700-normal-0d0a6262.woff2     14.71 kB
public/build/assets/source-sans-pro-latin-400-normal-7b348b30.woff2     14.89 kB
public/build/assets/source-sans-pro-latin-700-italic-1933b21f.woff      17.68 kB
public/build/assets/source-sans-pro-latin-400-italic-c3707996.woff      17.76 kB
public/build/assets/source-sans-pro-latin-700-normal-bcc2a2ed.woff      18.39 kB
public/build/assets/source-sans-pro-latin-400-normal-69491b82.woff      18.42 kB


因此,字体很容易访问,例如https://example.com/build/assets/source-sans-pro-latin-400-normal-69491b82.woff,但当然这是一个动态URL。
我如何获取该URL以供我的脚本使用?

3qpi33ja

3qpi33ja1#

您可以使用import.meta.url获取资产的URL。Vite将执行必要的转换,以便即使在捆绑和资产散列之后,URL仍然指向正确的位置:

const fontUrl = new URL("FONT_PATH", import.meta.url).href;

字符串
这是证明文件

相关问题