I am trying to generate a PDF on Vercel using Puppeteer-core, @sparticuz/chromium-min, and Next.js, but Japanese characters do not appear at all in the generated PDF. Only English characters are displayed.There is no garbled text or incorrect symbols—it’s as if the Japanese text is completely missing.
Here’s my current implementation:
import chromium from "@sparticuz/chromium-min";
import { ResumeFormData } from "@/schemas/resumeSchema";
const chromiumPack =
".0.0/chromium-v133.0.0-pack.tar";
export async function POST(request: Request) {
try {
const data = (await request.json()) as ResumeFormData;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@font-face {
font-family: 'Noto Sans JP';
src: url('file://${process.cwd()}/public/fonts/NotoSansJP-Medium.ttf') format('truetype');
}
body {
font-family: 'Noto Sans JP', sans-serif;
margin: 0;
padding: 20mm;
}
h1 {
text-align: center;
font-size: 24px;
margin-bottom: 2rem;
}
h2 {
font-size: 20px;
margin-bottom: 1rem;
border-bottom: 1px solid #ccc;
padding-bottom: 0.5rem;
}
</style>
</head>
<body>
<h1>職務経歴書</h1>
<h1>test</h1>
<div class="section">
<h2>基本情報</h2>
<p>氏名: ${data.basicInfo.lastName} ${data.basicInfo.firstName}</p>
<p>フリガナ: ${data.basicInfo.lastNameKana} ${
data.basicInfo.firstNameKana
}</p>...
// Puppeteerを使用してPDFを生成
const browser = await puppeteer.launch({
headless: true,
args: [...chromium.args, "--no-sandbox", "--disable-setuid-sandbox"],
executablePath: await chromium.executablePath(chromiumPack),
});
`
const page = await browser.newPage();
await page.setContent(html, {
waitUntil: "networkidle0",
});
const pdf = await page.pdf({
format: "A4",
printBackground: true,
margin: {
top: "20mm",
right: "20mm",
bottom: "20mm",
left: "20mm",
},
});
`
Is there a proper way to embed Japanese fonts inside Puppeteer for use on Vercel?
Would appreciate any insights or alternative solutions! Thanks in advance!
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744858236a4597536.html
评论列表（0条）