pdfmake Font ‘Roboto‘ in style ‘bold‘ is not defined in the font section of或File ‘Roboto-Regular.t

pdfMake引入字体包的报错pdfmake Font 'Roboto' in style 'bold' is not defined in the font section of

File 'Roboto-Regular.ttf' not found in virtual file system

使用pdfMake需要引入

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";

1.File 'Roboto-Regular.ttf' not found in virtual file system

错误原因是给fonts对象赋值时没赋值默认字体roboto,roboto为pdfMake默认字体，必须赋值一下

pdfMake.fonts = {
    Roboto: {
      normal: 'Roboto-Regular.ttf',
      bold: 'Roboto-Medium.ttf',
      italics: 'Roboto-Italic.ttf',
      bolditalics: 'Roboto-MediumItalic.ttf'
    },
    SourceHanSansCN: {
      normal: 'SourceHanSansCN-Normal.ttf',
      bold: 'SourceHanSansCN-Normal.ttf',
      italics: 'SourceHanSansCN-Normal.ttf',
      bolditalics: 'SourceHanSansCN-Normal.ttf'
    }
  };

2.pdfmake Font 'Roboto' in style 'bold' is not defined in the font section ofFile

错误原因找不到roboto字体包资源，即使style没使用roboto字体也需要有这个字体资源。

1)克隆下边的git网址，用其整个替换掉node_modules里的pdfMake,

https://github.com/bpampuch/pdfmake

2)此地址的pdfmake已经有了examples/fonts文件夹不需要新建了，在examples/fonts中将需要引入的字体丢进文件夹执行指令node build-vfs.js "./examples/fonts"

3)原本出现错误逻辑是build/vfs_fonts.js中的代码有缺陷，暴露不完整，fonts文件夹只有新增的字体，构建时也只会编码新增字体添加到build/vfs_fonts中，使原有的roboto编码被替换了，默认字体roboto在build中找不到报错

4）在引入页面打印pdfFonts 看该对象中是否包含【新增字体与roboto的四种字体】，没有去看pdfMake文件夹的build文件夹中的vfs_fonts.js文件中是否含有这几个字体编码，正确替换网址的pdfMake包一定会有

5）vfs_fonts.js有引入的pdfFonts 中没有新增字体与roboto的四种字体,因为vite或者使用框架的缓存，和浏览器缓存

1.清除当前使用的浏览器的缓存数据
2.删除项目中node_modelus中.vite文件夹，重启项目

6）把带有roboto与引入字体编码的对象赋值给pdfMake.vfs解决roboto文件找不到

完整的使用引入流程

1.npm pdfMake

2.用下面网址替换node_modulse中的pdfMake文件夹

GitHub - bpampuch/pdfmake: Client/server side PDF printing in pure JavaScript

3.下载一个支持中文的tff文件放入examples文件夹中，在pdfMake路径运行（执行后build/vfs_fonts.js中将多出添加字体的编码，事实上引入的pdf生效的只有build文件夹下的几个js文件，当vfs_fonts.js编码成功可以直接使用build，引入pdfMake.js,vfs_fonts.js路径）

node build-vfs.js "./examples/fonts"

 

4.清除浏览器缓存，清除node_modelus中.vite，重启项目

5.使用pdfMake.fonts中必须有roboto对象，pdfMake.vfs中必须包含roboto编码

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";


//下载函数
function down(){

contect =	{
			style: 'tableExample',
			color: '#444',
			table: {
//每行宽度
				widths: [200, 'auto', 'auto'],
//表头的行数，设置为表头分页时会携带
				headerRows: 2,
				// keepWithHeaderRows: 1,
//table的数据，合并Colspan ，rowspan
				body: [
					[{text: 'Header with Colspan = 2', style: 'tableHeader', colSpan: 2, alignment: 'center'}, {}, {text: 'Header 3', style: 'tableHeader', alignment: 'center'}],
					[{text: 'Header 1', style: 'tableHeader', alignment: 'center'}, {text: 'Header 2', style: 'tableHeader', alignment: 'center'}, {text: 'Header 3', style: 'tableHeader', alignment: 'center'}],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					[{rowSpan: 3, text: 'rowSpan set to 3\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor'}, 'Sample value 2', 'Sample value 3'],
					['', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', {colSpan: 2, rowSpan: 2, text: 'Both:\nrowSpan and colSpan\ncan be defined at the same time'}, ''],
					['Sample value 1', '', ''],
				]
			}
		},
 let pdfMakeData = {
    // watermark: { text: '乐恒', font: 'SourceHanSansCN' } || '',
    pageSize: pageSize,
    // pageOrientation: 'portrait',
    pageMargins: [
      cardLeft,
      cardTop,
      cardLeft,
      cardTop,
    ],
    content: content,
//简单的样式
    styles: {
      tableExample: {
        margin: [0, 5, 0, 15],
        font: 'SourceHanSansCN',
        color: 'black',
      },
    },
    defaultStyle: {
      defaultStyle: {
        font: 'SourceHanSansCN'
      },
    }
  }
//业务逻辑结束，根据需要构建pdfMake需要的content
//添加vfs字体
  pdfMake.vfs = pdfFonts;
//添加字体对象，Roboto是必须添加的否则报错，剩余添加需要的字体这里是SourceHanSansCN
  pdfMake.fonts = {
    Roboto: {
      normal: 'Roboto-Regular.ttf',
      bold: 'Roboto-Medium.ttf',
      italics: 'Roboto-Italic.ttf',
      bolditalics: 'Roboto-MediumItalic.ttf'
    },
    SourceHanSansCN: {
      normal: 'SourceHanSansCN-Normal.ttf',
      bold: 'SourceHanSansCN-Normal.ttf',
      italics: 'SourceHanSansCN-Normal.ttf',
      bolditalics: 'SourceHanSansCN-Normal.ttf'
    }
  };
//下载
  pdfMake.createPdf(pdfMakeData).download(getFileName());
}

demo,fonts里有字体

pdfxlsx: 不操作dom导出pdf xlsxxlsx-js-style pdfmake