【问题标题】: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. 我注意到您的项目引用了 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"
      }
      
    2. 我不确定幻影配方中是否存在错误。但是,适用于 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,
          }))
          ;
      
    3. 现在我们可以添加字体和资产配置。

      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));
      
    4. 最后,我们现在可以嵌入 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并呈现为纵向
    猜你喜欢
    • 2014-09-02
    • 2012-10-31
    • 2010-11-06
    • 2011-05-30
    • 2018-12-04
    • 1970-01-01
    • 2011-04-20
    • 1970-01-01
    相关资源
    最近更新 更多