Question

我是C＃开发人员，在使用网络字体呈现PDF文档时遇到问题。我的文档正在渲染而没有字体（http://localhost:60757/Home/DownloadPdf），但是在我的浏览器中，渲染的视图看起来很好（http://localhost:60757/Home/PdfTemplate）。我试图找到一种解决方案并阅读有关字体（https://jsreport.net/blog/fonts-in-pdf）的信息，但我无法解决。

我包括我的github项目：https://github.com/Dev781/App

有什么想法吗？

Answer 1

我注意到您的项目引用了1.x的版本。我建议您将依赖项更新为2.x（我一再尝试，但是在使用1.x版本时失败）：

"dependencies": {
    "jsreport-assets": "^1.0.1",
    "jsreport-chrome-pdf": "^1.1.5",
    "jsreport-core": "^2.2.0",
    "jsreport-express": "^2.2.2",
    "jsreport-jsrender": "^2.0.0",
    "jsreport-phantom-pdf": "^2.1.3",
    "jsreport-scripts": "^2.0.6",
    "jsreport-templates": "^2.0.0",
    "puppeteer": "^1.8.0"
}

我不确定幻影配方中是否存在错误。但是，适用于chrome和html的相同代码不适用于幻影。因此，我添加了chrome-pdf的食谱：

const options = {
    tasks: {strategy: 'in-process'},
    autoTempCleanup: false,
}

const jsreport = require('jsreport-core')(options) 
    .use(require('jsreport-templates')())
    .use(require('jsreport-jsrender')())
    .use(require('jsreport-scripts')())
    .use(require('jsreport-phantom-pdf')({ }))
    .use(require('jsreport-chrome-pdf')({ }))
    .use(require('jsreport-assets')({
        allowedFiles: "**/*.*",
        searchOnDiskIfNotFoundInStore: true,
    }))
    ;

现在我们可以添加字体和资产配置。

var myfont={
    "name": "myfont.woff2",
    "link": "wwwroot/jsreport-assets/fonts/myfont.woff2"
}

jsreport.init()
    .then(async(reporter) => {
        var assets=reporter.documentStore.collection("assets");
        await assets.insert(myfont);
        return reporter;
    })
    .then(reporter => reporter.render({
        template: {
            content: data,
            engine: 'jsrender',
            recipe: 'chrome-pdf',
            chrome: {
                format: 'A4',
                margin: { top: 0, right: 0, bottom: 0, left: 0 },
                orientation: "landscape"
            }
        },
        data: { }
    })).then((resp) => {
        callback(null, resp.content.toJSON().data);
    }).catch(e=>callback(e,null));

最后，我们现在可以嵌入base64编码的字体：

@@font-face {
    font-family: 'MyFont';
    font-weight: 10000;
    font-style: italic;
    src: url('{#asset myfont.woff2 @@encoding=dataURI}') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} 
* {
    font-family: 'MyFont';
}

我在这里使用双@，因为您将首先使用Razor渲染模板。

以下是它的屏幕截图：

渲染无字体的Pdf

1 个答案: