Рендеринг PDF без шрифта - PullRequest
Новая
       19

Рендеринг PDF без шрифта

0 голосов
/ 25 сентября 2018

Я разработчик на 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

Есть идеи?

1 Ответ

0 голосов
/ 26 сентября 2018

  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, не будет работать на фантоме.Поэтому я добавляю рецепт 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.

Вот скриншот, он работает:

enter image description here

...