程序员经验分享-hwhale

pdfmake - 使用自己的字体不起作用

2024-01-07

我正在使用 pdfmake 在客户端创建 PDF。我们有一个所见即所得的编辑器，允许用户创建 pdf。然后对其进行解析以与 pdfmake 一起使用。

但是，我无法使用普通字体。该插件使用vfs_fonts.js https://github.com/bpampuch/pdfmake/blob/master/build/vfs_fonts.js在 PDF 上创建字体，默认为 Roboto。

我正在尝试让它与 Times New Roman 等类似的软件一起使用。

我尝试像这样更改文件：

window.pdfMake = window.pdfMake || {};
window.pdfMake.vfs = {
  Roboto: {
		"Roboto-Italic.ttf": "BASE 64 HERE",
        "Roboto-Medium.ttf": "BASE 64 HERE",
        "Roboto-Regular.ttf": "BASE 64 HERE"
  },
  TimesNewRoman: {
        "Roboto-Italic.ttf": "BASE 64 HERE",
        "Roboto-Medium.ttf": "BASE 64 HERE",
        "Roboto-Regular.ttf": "BASE 64 HERE"
  }
}

我已经使用与 Roboto 相同的字体作为测试，但它仍然不起作用。这是我返回的错误

Uncaught Error: No unicode cmap for font

下面是我的代码。您将此字符串粘贴到pdf 测试器在这里 http://pdfmake.org/playground.html并查看结果

{  
   "content":[  
      {  
         "stack":[  
            {  
               "text":[  
                  {  
                     "text":""
                  }
               ]
            },
            {  
               "text":"ygjjkjgjkhjkjghk",
               "style":"style_2",
               "lineHeight":"1"
            }
         ],
         "style":"style_1"
      },
      {  
         "stack":[  
            {  
               "text":[  
                  {  
                     "text":""
                  }
               ]
            },
            {  
               "text":" ",
               "style":"style_4",
               "lineHeight":"1"
            }
         ],
         "style":"style_3"
      },
      {  
         "stack":[  
            {  
               "text":[  
                  {  
                     "text":""
                  }
               ]
            },
            {  
               "text":"",
               "style":"style_7",
               "font":"TimesNewRoman",
               "lineHeight":"1"
            },
            {  
               "text":"sdfghfdghfghdgfgfh",
               "style":"style_8",
               "font":"TimesNewRoman",
               "lineHeight":"1"
            }
         ],
         "style":"style_5"
      }
   ],
   "styles":{  
      "style_1":{  
         "opacity":"1"
      },
      "style_2":{  
         "opacity":"1"
      },
      "style_3":{  
         "opacity":"1"
      },
      "style_4":{  
         "opacity":"1"
      },
      "style_5":{  
         "opacity":"1"
      },
      "style_6":{  
         "opacity":"1"
      },
      "style_7":{  
         "font":"TimesNewRoman",
         "opacity":"1"
      },
      "style_8":{  
         "opacity":"1"
      }
   },
   "pageSize":"A4",
   "pageOrientation":"portrait",
   "pageMargins":[  
      40,
      20,
      40,
      20
   ]
}

还有其他人使用过这个库吗？如果是这样，您是否使用了自定义字体？您是如何让它们发挥作用的？如果需要的话我可以发布更多代码，谢谢


有关如何在客户端使用自定义字体的 Pdfmake 文档here https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side.

vfs_fonts.js 文件格式类似于：

this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
  "Roboto-Italic.ttf": "AAEAAAASAQAABAAgR0RFRtRX1"
}

因此，您应该将其定义如下：

window.pdfMake.vfs["Times-New-Roman-Regular.ttf"] = "BASE 64 HERE";
window.pdfMake.vfs["Times-New-Roman-Medium.ttf"] = "BASE 64 HERE";
window.pdfMake.vfs["Times-New-Roman-Italic.ttf"] = "BASE 64 HERE";

之后，您仍然需要分配 pdfMake.fonts：

pdfMake.fonts = {
    // Default font should still be available
    Roboto: {
        normal: 'Roboto-Regular.ttf',
        bold: 'Roboto-Medium.ttf',
        italics: 'Roboto-Italic.ttf',
        bolditalics: 'Roboto-Italic.ttf'
    },
    // Make sure you define all 4 components - normal, bold, italics, bolditalics - (even if they all point to the same font file)
    TimesNewRoman: {
        normal: 'Times-New-Roman-Regular.ttf',
        bold: 'Times-New-Roman-Bold.ttf',
        italics: 'Times-New-Roman-Italics.ttf',
        bolditalics: 'Times-New-Roman-Italics.ttf'
    }
};

然后，您可以同时使用Robot and TimesNewRoman正如您现在所做的那样，作为 pdf 定义中的字体：

{  
   content:[  
      {  
         text: 'some text using Roboto font'
         style: 'style_1'
      },
      {  
         text: 'some text using Times New Roman font'
         font: 'TimesNewRoman'
      }
   ],
   styles:{  
      style_1:{  
         opacity: '1',
         font: 'Roboto'
      }
   }
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

pdfmake

pdfmake - 使用自己的字体不起作用 的相关文章

随机推荐

  • 使用 Yup 和 Typescript 的动态验证消息

    我正在尝试使用 Yup 创建一些自定义错误消息 以确定用户的电子邮件地址是否正在使用 我创建了以下承诺来尝试捕获服务器通信错误 test name Email Check test value gt if value includes re

  • “兄弟姐妹来电”是什么意思？

    在海湾合作委员会手册上 优化兄弟呼叫 优化同级和尾递归调用 例如 我知道尾递归调用 int sum int n 返回 n 1 1 n 总和 n 1 然而 兄弟姐妹的称呼是什么意思呢 尾部调用 如果函数调用是另一个函数中执行的最后一个操作 则

  • 按下按键时发出不需要的蜂鸣声

    我有一个接受按键输入的自定义视图 它位于NSScrollView 我已经设置了acceptsFirstResponder为 yes 并且它正在成功接受 keyDown 但每次我敲击一个键时 我都会听到一声蜂鸣声 我确信还需要其他东西 但不记

  • 如何在 Xcode 应用程序组内排列文件？

    在 X 代码中 我添加了 3 个名为 Classes COCOS2d Images 在图像下 我添加了 40 个文件 但 IMAGEs 组下的所有图像均不按名称排序 我想对它们进行排序 但我没有找到任何选项 选择组树中图像组下的所有图像 然

  • 使用 Python 的 Azure 存储帐户 blob 流

    使用最新的 azure storage blob 12 4 0 python 库 我需要在 blob 上打开一个流 而不将其完全下载到内存中 我有 hdf5 文件存储在存储帐户中 使用 h5py 2 10 0 我需要提取一些信息 读取数据而

  • 雄辩的搜索/自定义属性上的位置

    我向模型添加了自定义属性 public function getTouchedAttribute 我想将其添加到查询中 hasMany gt where touched 但显然这不是表中的一列 实现这种行为的最优雅的方式是什么 一种选择 就

  • row_array()['key'] 在 PHP 5.3 中不起作用

    我是否正确 以下语法在 PHP 5 4 中有效 但在 PHP 5 3 中无效 users key class class gt row array name The row array function 是一个返回数组的 CodeIgnit

  • 如何从本地主机将 SQL 数据库导入 R？

    我刚刚使用 MAMP 创建了我的第一个 SQL 数据库 很简单 只是一个宠物列表 我想将它加载到 R 中 这是我写的 install packages dbConnect library dbConnect mypets dbConnect

  • 在同一个元素上并行执行多个 jQuery 效果

    我发现这个问题被问了很多次 但没有一个解决方案对我有用 我有两个想要并行执行的效果 我希望盒子同时淡入和弹跳 http jsfiddle net 6VVUG http jsfiddle net 6VVUG 链接 UI 效果并使用dequeu

  • sqflt8、sqlmoney 和其他本机 SQL 数据类型的二进制存储格式是什么？

    根据文档 可以使用以本机 SQL Server 数据格式格式化的 bcp 导入或导出本机 二进制 数据 例如 SQLFLT8 SQLFLT4 SQLMONEY 或 SQLNUMERIC 有谁知道各种类型的数据格式是什么 或者在哪里可以找到指

  • 基于第一个淘汰赛教程，为什么我的代码没有运行？

    我了解教程在页面上的工作原理 但我正在尝试在本地设置一个计算器来创建计算器 但无法让 knockout js 工作 它不像 Knockout js 在线教程那样初始化或填充 HTML

  • 使用pdfbox从pdf中删除不可见文本

    链接到 pdf https drive google com file d 1F8vrzcABwxVGdN5W 7etQggY5xKtGplU view 当我尝试从上面的 pdf 中提取文本时 我得到了在 evince 查看器中不可见的文本

  • QuickFix 发送时间（字段 52）减少毫秒

    我正在使用 Python API 运行 QuickFix 并使用 FIX4 2 连接到 TT FIX 适配器 我已成功登录并发送市场数据请求 回复都很好啊在我的消息日志 屏幕日志和文件日志 中 我收到一个 SendingTime 字段 52

  • 如何恢复 Clearcase 中签出的文件？

    假设有一个名为 myfile java 的文件 我检查了一下并且正在研究它 在检查之前 我丢失了硬盘 必须购买新硬盘 下次我想签出该文件时 它说我无法签出 它已经在已经消失的旧视图中签出 我必须提到我正在使用 重用开发流选项 选项 我可以做

  • 让 DOM IE 变得友好

    我怎样才能使这个脚本对IE友好 唯一对 IE 不友好的部分是变量scrolledtonum and heightofbody function getheight var myWidth 0 myHeight 0 if typeof win

  • 具有可见条件或任务依赖性的 VSTS 构建摘要选项卡

    我尝试将新的自定义选项卡添加到构建结果的摘要页面 但仅针对使用我的自定义构建任务进行的构建添加该选项卡 例如 任务 发布工件 仅当添加此任务时 摘要页面中才会添加 工件 选项卡 我希望我的任务和选项卡具有相同的行为 现在 我刚刚在 贡献 中

  • 无法确定操作系统

    When I go on terminal i installed smlnj and i type sml it gives me the error sml unable to determine architecture operat

  • Bigquery 是否会为通过流式传输插入的每一行保存时间戳？

    我知道 Hbase 在每次插入时都会保存一个时间戳 google BigQuery 也是这样吗 你如何访问它 目前存在解决方法 此功能已经以不同的方式投入生产 如果用户希望在请求到达 BigQuery 流系统时保存时间戳 用户可以在表架构中

  • 变量值更改时中断

    与这里的其他问题类似 像这个 https stackoverflow com questions 3231149 visual studio break on variable change 有没有办法在任何 JavaScript 调试器中

  • pdfmake - 使用自己的字体不起作用

    我正在使用 pdfmake 在客户端创建 PDF 我们有一个所见即所得的编辑器 允许用户创建 pdf 然后对其进行解析以与 pdfmake 一起使用 但是 我无法使用普通字体 该插件使用vfs fonts js https github c

热门标签