Сгенерированный файл отображает текст правильно, но текст не доступен для поиска в Chrome (но работает в Safari и Edge) ⇐ Javascript

[Anonymous]

Я использую pdfmake в проекте Next.js для генерации PDF -файлов с японским текстом с использованием шрифтов NotoSansJP. Шрифты загружаются через выборку, кодируют в Base64 и назначаются виртуальной файловой системе (VFS). Сгенерированный PDF визуально визуально визуально визуально японские символы во всех браузерах. Chrome только если жирный жирный: true установлен. < /P>
Что я попробовал
ulling .ttf и .otf версии notosansjp.
Установка шрифта с использованием стиля шрифта на обоих по умолчанию и на одном уровне. Решить эту проблему с помощью PDFMake и японских шрифтов в Chrome?
Есть ли способ исправить кодирование текста, так что он доступен для поиска?
требует ли конкретных настроек формата шрифта?
или это ограничение рендеринга Chrome PDF? let isPdfMakeReady = false;

async function fetchFontBase64(url: string): Promise {
const res = await fetch(url);
const blob = await res.blob();

return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
const result = reader.result as string;
resolve(result.split(',')[1]); // remove "data:application/x-font-otf;base64,"
};
reader.onerror = reject;
reader.readAsDataURL(blob);
});
}

export async function initFonts() {
if (isPdfMakeReady || typeof window === 'undefined') return pdfMake;

const [regular, bold] = await Promise.all([
fetchFontBase64('/fonts/NotoSansJP-Regular.ttf'),
fetchFontBase64('/fonts/NotoSansJP-Bold.ttf'),
]);

pdfMake.vfs = {
'NotoSansJP-Regular.otf': regular,
'NotoSansJP-Bold.otf': bold,
};

pdfMake.fonts = {
NotoSansJP: {
normal: 'NotoSansJP-Regular.otf',
bold: 'NotoSansJP-Bold.otf',
italics: 'NotoSansJP-Regular.otf',
bolditalics: 'NotoSansJP-Bold.otf',
}
};

isPdfMakeReady = true;
}

initFonts();

let definition: TDocumentDefinitions = {
pageSize: "A4",
pageOrientation: pageOrientation,
pageMargins: pageOrientation === "portrait" ? [0, 20, 0, 90] : [30, 20, 30, 90],
content: {
text: '支援等記録', style: {
font: "NotoSansJP",
fontSize: 18,
bold: false,
}
},
{
marginLeft: 20,
marginRight: 28,
columns: [
{
width: "*",
stack: [
{
table: {
widths: ["*", "*", '*'],
body: [
[
{ text: groupHome.name, bold: true },
"",
{ text: '', alignment: "right", bold: true }
],
[
{ text: `${customer.name} 様`, style: "text" },
"",
{ text: "", alignment: "right" }
]
]
},
layout: 'noBorders'
},
{
marginTop: 10,
table: {
widths: [100, 100],
body: [
['日付', getDisplayDate(date)],
['水分合計量', getWaterAmountTotal(dailyRecordGroup.records).toString() + "ml"]
]
},
},
]
},
{
width: 50,
table: {
widths: [50],
heights: [10, 50],
body: [
[{ text: '利用者確認印', alignment: "center" }],
[(stampSetting && stampSetting[RECORD_PDF_STAMP_TYPES.CUSTOMER as keyof RecordPdfStampSetting] && stampImage) ? {
image: stampImage,
width: 50,
height: 50
} : ""]
]
},
}
]
}
],
footer: function (currentPage, pageCount) {
return [
{
text: `${currentPage.toString()} / ${pageCount}`,
marginLeft: 560,
marginTop: 60
}
];
},
defaultStyle: {
font: 'NotoSansJP',
fontSize: 8,
lineHeight: 0.9
},
styles: {
title: {
fontSize: 18,
bold: true,
alignment: "center",
marginBottom: 20
},
subheader: {
fontSize: 12,
bold: true,
margin: [0, 10, 0, 5]
},
text: {
fontSize: 8,
bold: false,
},
tableExample: {
margin: [0, 5, 0, 15]
}
},
};


Подробнее здесь: https://stackoverflow.com/questions/796 ... chrome-but