我正在使用img jsPDF AutoTable库从我的HTML表创建PDF文件,Everythink工作正常,PDF总是创建,但我对我的国家/地区典型的一些特殊字符有疑问。在我的 PDF 文件中,包含这些字符的字符串在打印时没有包含它们,而且,看起来该字符串中的每个字符都用空格分隔。
我无法选择没有这个字符的方式,因为它们包含在例如名称中。我遇到问题的字符是例如 c 和 hook -> č。
下面我给你举个例子,其中第 1、2、3 和 4 行的第一列缺少带有钩子的 c,然后用空格分隔字符。
无c带挂钩的桌子
"/>
你不知道如何解决吗?
我来自捷克共和国,如果有帮助的话(因为字符集)..
在发布 1.4.0 版本后,jsPDF 终于支持了变音符号字符的编码,但在我看来,以一种非常奇怪的方式。
C:\Windows\Fonts\Calibri
并将 .ttf
字体文件复制到桌面。import { jsPDF } from "jspdf"
var font = 'AAEAAAAWAQQAAB...==';
var callAddFont = function () {
this.addFileToVFS('calibri-normal.ttf', font);
this.addFont('calibri-normal.ttf', 'calibri', 'normal');
};
jsPDF.API.events.push(['addFonts', callAddFont]);
this.addFont('calibri-normal.ttf', 'calibri', 'normal');
中的第二个字符串将是你的字体的名称。记住它。
import '../utils/calibri-normal';
jsPDF
对象并设置字体的位置:const doc = new jsPDF('p', 'pt', 'a4');
doc.setFont("calibri"); // <-- place here your font name, which you remeber before
//...
doc.save('file001.pdf');
doc.autoTable({
head: [['Column1', 'Column2', 'Column3']],
body: someDataRows,
styles: {
font: 'calibri', // <-- place name of your font here
fontStyle: 'normal',
},
margin: { bottom: 60 }
});
到 2023 年,这是我的解决方案:
let font = null;
await fetch('/fonts/poppins-v20-latin-ext_latin-regular.ttf')
.then(response => response.arrayBuffer())
.then(fontData => {
// Convert the ArrayBuffer to a base64-encoded string
const fontDataArray = new Uint8Array(fontData);
const base64FontData = btoa(String.fromCharCode(...fontDataArray));
font = base64FontData;
})
.catch(err => {
// Handle the error here
console.log(err);
});
if (!font) return;
// Add the font to vFS
doc.addFileToVFS('poppins-v20-latin-ext_latin-regular.ttf', font);
// Set unicode font
doc.addFont('poppins-v20-latin-ext_latin-regular.ttf', 'Poppins', 'normal');
doc.setFont('Poppins');
doc.text(supplier, 10, 10);
doc.text(date, 285, 10, {
align: 'right'
});
// Use the autoTable function to create the table
doc.autoTable({
head: [headers.map(header => header.prompt)],
body: tableData,
startY: 20,
theme: 'grid', // You can adjust the theme if needed
styles: { fontSize: fontSize, font: 'Poppins' },
headStyles: { fillColor: '#fbfbfb' },
margin: { top: 10, right: 10, bottom: 10, left: 10 },
didDrawPage: function (data) {
// Add page numbers
doc.text('Page ' + doc.internal.getNumberOfPages(), data.settings.margin.left, doc.internal.pageSize.height - 10);
},
});