在 pdfkit 中嵌入自定义字体

问题描述 投票：0回答：2

我在这里看过一些关于 pdfkit 和嵌入字体的帖子，但大多数似乎使用节点版本或 ruby / 看起来与我正在做的有很大不同的东西。

我什么都有，除了字体按预期工作。但是，当我启用自定义字体时，不会出现任何文本。我看到列表的占位符和项目符号，但除此之外，什么也没有。

<html>
  <head>    
  <script src="https://github.com/foliojs/pdfkit/releases/download/v0.11.0/pdfkit.standalone.js"></script>
  <script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js"></script>
  <script type="text/javascript">      
    
    //getting the arraybuffer of the font I need
    var xhr = new XMLHttpRequest;
    xhr.onload = function() {
        console.log("Font IS 1",xhr.response)
    };

    xhr.responseType = 'arraybuffer';
    xhr.open('GET', 'https://fonts.gstatic.com/s/cormorantgaramond/v9/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2', true);
    xhr.send();
      
    //wix method that starts when a UI element is called.  In this case a "download" button
    window.onmessage = (event) => {
        if (event.data) {
      
            // create a document and pipe to a blob
            var doc = new PDFDocument();
            var stream = doc.pipe(blobStream());



            doc.font(xhr.response)
            //The standard way of setting a font for embedded
            //doc.font('Helvetica')

              
              doc.fontSize(20)
              doc.text('Стартовая Страница',200,120)
              doc.text('Test',200,220)
              doc.list(['Стартовая Страница'],50,50)
              doc.list(['TestList'],50,400)

              // end and display the document in the iframe to the right
              doc.end();
            stream.on('finish', function() {
                const blob = stream.toBlob('application/pdf')
                const a = document.createElement('a');
                a.href = window.URL.createObjectURL(blob);
                a.download = "ShoppingList";
                a.style.position = 'fixed';
                a.target = '_blank';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        });
      
    };


    </script>
  </head>
  
  <body>

  </body>
</html>

我尝试了几种不同的方法，但大多数帮助似乎都建议使用 CSS，我不知道如何在这里使用它。不幸的是，我无法将字体上传到我自己的文件系统以用作我构建它的网站由于某种原因阻止字体上传。这就是为什么我使用谷歌字体，因为我没有遇到 CORS 问题。

我直接链接到 woff2 文件，因为使用谷歌推荐的任何其他方法获取数组缓冲区似乎不起作用。请注意，我将使用拉丁字符和西里尔字符，因此这可能是一个问题，因为它们是单独的字符集，看起来

这是我获取链接的地方 https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap

此外，当我尝试打开 pdf 时，出现此错误 无法提取嵌入字体“BZZZZZ+CormorantGaramond-Regular”。某些字符可能无法正确显示或打印

当我查看 pdf 中注册的字体时，它似乎显示了其他字体的显示方式

我应该尝试其他方法将此字体注册到文档中吗？

javascript html pdf-generation wkhtmltopdf pdfkit
2个回答
3
投票

您似乎无法直接嵌入谷歌字体提供的任何“woff2”文件。您必须在 github 存储库中找到可用的 otf 或 ttf 文件。

您可以在这里找到您需要的文件：https://github.com/CatharsisFonts/Cormorant/tree/master/1.%20TrueType%20Font%20Files

只需下载文件，然后复制并粘贴下载链接。所以：

xhr.open('GET', 'https://fonts.gstatic.com/s/cormorantgaramond/v9/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2', true);

应该是：

xhr.open('GET', 'https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/1.%20TrueType%20Font%20Files/Cormorant-Regular.ttf', true);

0
投票

这对我有用：

  const myfont = await fetch("fonts/myfont.ttf")
    .then((r) => r.arrayBuffer());

  doc.font(myfont)
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.