渲染不带字体的 PDF答案

【问题标题】：Render Pdf without font渲染不带字体的 PDF
【发布时间】：2018-09-26 19:14:06
【问题描述】：

我是 C# 开发人员，在使用 Web 字体呈现 PDF 文档时遇到问题。我的文档在没有字体的情况下呈现（http://localhost:60757/Home/DownloadPdf），但在我的浏览器中呈现的视图看起来不错（http://localhost:60757/Home/PdfTemplate）。我试图找到解决方案并阅读有关字体的信息（https://jsreport.net/blog/fonts-in-pdf），但我无法解决。

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

有什么想法吗？

【问题讨论】：

标签： asp.net-core pdf-generation jsreport google-fonts

【解决方案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 的相同代码在 phantom 上不起作用。所以我添加了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';
}

我在这里使用 double @，因为您将首先获得由 Razor 渲染的模板。

这是一个有效的屏幕截图：

【讨论】：

问题是字体工作（很好），但页面被定义为landspace并呈现为纵向