javascript - Puppeteer npm 如何从本地文件设置字体-6ren

javascript - Puppeteer npm 如何从本地文件设置字体

转载作者：行者123 更新时间：2023-12-04 09:10:17

26

4

我想在使用 puppeteer Node 模块渲染 PDF 时从本地文件加载字体。

使用 web fonts 对我有用但这不能满足要求。

我的环境:

Node :v10.18.1，

puppeteer 师:“puppeteer 师”:“^2.0.0”，

Chrome : Chrome 79.0.3945.88 Fedora 元素，

操作系统:CentOS Linux 发行版 8.0.1905(核心)

这是我迄今为止尝试过的代码:使用@font-face 加载字体、更改networkidle 的值、设置超时、设置用于字体更新的事件监听器。事件我设置此回调以获取返回“Open Sans”但呈现的 PDF 文件不是 Open Sans 字体的字体属性。

const puppeteer = require('puppeteer');
const chromiumExecutablePath = '/bin/chromium-browser';

let document = `
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>

            @font-face {
                font-family: "Open Sans";
                font-style: normal;
                font-weight: 400;
                src: local("Open Sans") url("/opt/www/webapp/resources/packed/OpenSans-Regular.eot");
                src: local("Open Sans") url("/opt/www/webapp/resources/packed/OpenSans-Regular.woof") format("woff"),
                     local("Open Sans") url("/opt/www/webapp/resources/packed/OpenSans-Regular.ttf") format("truetype");
            }

            html, body {
              font-family: 'Open Sans', sans-serif;
            }

        </style>
        <sript>

        </script>
        <link rel="stylesheet" type="text/css" href="font.css">
      </head>
      <body>
        <div class="content">
          <h1 id="hello-world">Hello world long report</h1>
        </div>
      </body>
    </html>
    `
const browser = await puppeteer.launch({
    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-web-security', '--font-render-hinting=none'],
    headless: true,
    executablePath: chromiumExecutablePath
});
const page = await browser.newPage()

const session = await page.target().createCDPSession();
await session.send('DOM.enable');
await session.send('CSS.enable');
await new Promise(resolve => setTimeout(resolve, 500));
session.on('CSS.fontsUpdated', event => {
  console.log(event);
  // event will be received when browser updates fonts on the page due to webfont loading.
});

await page.goto("data:text/html;charset=UTF-8,"+document, { waitUntil: 'networkidle0' }).catch(e => console.error(e));
await page.waitFor(2000);

await page.evaluateHandle('document.fonts.ready');

const selector = 'h1';
const getFontProperty = async (page) => {
  const font = await page.evaluate((selector) => {
    const title = document.querySelector(selector);
    return getComputedStyle(title).font;
  }, selector);
  return font;
}
console.log(await getFontProperty(page)); // output: 700 32px "Open Sans", sans-serif 

await page.emulateMedia("print");

await page.pdf({
    displayHeaderFooter: false,
    path: outputPath,
    width: 400+'px',
    height: 400+'px',
    printBackground: true,
    margin: {
        top: '20px',
        bottom: '40px'
    }
}); // output is valid PDF file but without Open Sans font

关于如何解决这个问题的任何想法？关于如何从本地文件渲染图像有一个类似的问题，但我无法从答案中解决如何使用字体完成。

最佳答案

我明白，但不要这样解决。
如果您在系统上正确安装这些字体，则 PDF 可能会正确导入字体。但是，PDF 消费者(尤其是一些廉价打印机)在打印 PDF 时会遇到困难。在这些情况下，我看到了非常奇怪的错误，例如基于打印机的拖尾。然而，这些都是假设的。
而是将整个字体嵌入为 base64。结果 PDF 将始终传输这些字体。 base64 myfont.woff > fontbase64.txt

const yourOpenSans = require('fs').readFileSync('./fontbase64.txt')

function genFont () {


    return `

     @font-face {
        font-family: 'YOUR Open Sans';
        src: url(data:font/truetype;charset=utf-8;base64,${yourOpenSans}) format('truetype');
        font-weight: normal;
        font-style: normal;
     }
    `

}

使用 font-face相应地在您的 CSS 中。
注意:这些文件对换行很敏感。

关于javascript - Puppeteer npm 如何从本地文件设置字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60541577/

26

4

0

文章推荐： javascript - 数组上的 updateMany()

文章推荐： xml - 设置 nillable ="false"时未进行 XSD 验证

文章推荐： javascript - 过滤 JavaScript 中的数组数组以使其变得唯一

npm - npm install npm -g不会将npm更新到最新版本
我正在使用npm v5.3.0。现在，我想将npm更新到v5.4.1。要执行此操作，请在终端中键入以下内容： npm install -g npm 没有任何错误。但是，当我键入npm -v时，得到的
npm 安装不起作用 | npm 错误!路径 | npm 错误!代码 | npm 错误!错误 | npm 错误!系统调用 | npm 错误!恩恩特
我已经使用 vue-cli 两个星期了，直到今天一切正常。我在本地建立这个项目。 https://drive.google.com/open?id=0BwGw1zyyKjW7S3RYWXRaX24tQ
npm - 如何在全局 npm 配置中重置 npm 注册表
有什么方法可以更改或重置全局 npm 注册表。感谢您的帮助。最佳答案在终端中运行以下命令以恢复到默认注册表 npm config set registry https://registry.np
npm - 什么时候应该使用 npm install vs npm i
查看 npm 的 documentation , 'i' 是 'install' 的别名，是否有任何情况下最好使用完整的 'npm install'？最佳答案两者之间没有具体区别。这只是一个懒惰的
npm - 我多久可以发布到 npm？
目前，每次将更改推送到 GIT 存储库时，我都会发布新版本的 NPM 包。我的大部分更改只是愚蠢的补丁。我使用 NPM 作为工具，在我的许多项目中启用版本控制和代码重用。经过一个月的工作，我已经完成了
npm - npm 安装错误
我运行的时候总是报错 npm install 谁知道怎么解决 npm ERR! Darwin 13.0.0 npm ERR! argv "/usr/local/bin/node" "/usr/b
npm - "npm uninstall"与 "npm uninstall --save"
“npm uninstall packageName”删除包并更新 package.json 文件。但是来自 npm 文档 - To remove a package from the depend
npm - 何时使用收缩包装、npm-lockdown 或 npm-seal
我的背景更熟悉 composer .我收到 gulp (等)进行构建过程和学习 node以及如何使用 npm我走的时候。很奇怪(再次来自 composer 背景)composer.lock默认情况下
npm - npm 模块名称的命名约定
我看到的许多 npm 模块名称前面都添加了技术名称，例如 react-native 或 jquery 等。由于我们已经在 package.json 文件中提供了关键字，因此遵循此约定有什么好处。我问这
npm - 模块是无关的 npm
我检查了 connect-privkey-to-provider模块在依赖项中。但是，它一直在说模块 'connect-privkey-to-provider' 是无关的 npm 和找不到模块 '
npm - "npm install"和 "npm ci"和有什么区别？
我正在进行持续集成并发现了 npm ci命令。我不知道在我的工作流程中使用此命令有什么优势。速度更快吗？这会让测试变得更难吗？好吗？最佳答案来自the official documentati
npm - 如何使用 postinstall 或单个 npm 命令安装嵌套的 npm 包
我有一个要发布到 NPM 的包，其中还包含如下所示的演示目录: . +-- demo | +-- src | | +-- main.js | +-- package.json +--
npm - Visual Studio Code - 使用 NPM 脚本时找不到 NPM
如果我打开集成终端并运行 npm -v 它会起作用。但是，如果我直接从 NPM SCRIPTS 运行它，它就不起作用。评论中要求的更多详细信息 //由 Fogmeister 编辑我也有这个问题，
npm - 如何解决 npm 安装错误 “npm ERR! code 1”
我正在尝试安装 gulp，当我写 npm install 时我得到了这个问题: npm ERR! code 1 npm ERR! path D:\www\wegrow\node_modules\nod
npm-scripts - “npm” 如何运行 “npm test code coverage” ？
这个问题已经有答案了: npm test --codecoverage doesn't generate report (3 个回答) 已关闭 4 年前。当我执行npm test --code-co
npm - `npm start` 和 `npm run start` 之间有区别吗？
我能够运行 npm start 和 npm run start 命令。我用过create-react-app创建我的应用程序。为了在 CSS 模块中进行配置更改，我想运行 npmject 但它会抛出错
npm - 使用 npm run 脚本时可以隐藏或静音 "npm ERR!"输出吗？
我正在使用npm run script执行“构建”和“测试”等任务。例如，我的 package.json 如下所示: { "name": "fulfillment-service", "ve
npm - 用 npm run 解决 "sh: command not found"的困难
我第一次将 npm 模块添加到我的项目中(jshint、optimg、jpgo)。我注意到有些项目，当我做 npm 运行 [名称] ，给出“sh: [name]: command not found”
npm-install - npm 安装错误 `not foundram Files/nodejs/npm: 3:/mnt/c/Program Files/nodejs/npm:`
我已经在 Windows 上安装了 Ubuntu Bash。我已经有 nodejs和 npm在我的 Windows 机器上 C:\Program Files\nodejs .在 Windows 的 b
node.js - npm 错误!代码 EMFILE npm ERR!系统调用产生 git npm ERR!路径 git npm ERR!错误号 EMFILE npm 错误!生成 git EMFILE
我正在尝试运行 npm install bitgo命令但在终端上出现以下错误， npm ERR! code EMFILE npm ERR! syscall spawn git npm ERR! pat

首页

博学

6Ren·AI

商城

javascript - Puppeteer npm 如何从本地文件设置字体