关于HTML转PDF中文无法显示的问题

__浮生一梦丨っ

于 2024-05-14 15:49:16 发布

阅读量208

点赞数 3

文章标签： html pdf 前端

本文链接：https://blog.csdn.net/qq_41541179/article/details/137108653

版权

如下图，输出后的PDF中，除了英文数字符号，剩下的字符全部不显示

HTML代码

<h1>1详情2</h1>

<h1>3Row and4 Col5 样式实现6</h1>

<div class="row">
    <div class="col">1--</div>
    <div class="col">2--</div>
    <div class="col">3查询 [2022] 002 号</div>
    <div class="col">4--</div>
    <div class="col">55</div>
</div>

输出后的PDF页面
在这里插入图片描述
HTML转PDF代码

public static OutputStream htmlToPdf(String htmlContent, String font,OutputStream os) throws IOException, com.lowagie.text.DocumentException {
        ITextRenderer renderer = new ITextRenderer();
        ITextFontResolver fontResolver = renderer.getFontResolver();
        // 设置字体
        fontResolver.addFont(font, BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);
        renderer.setDocumentFromString(htmlContent);
        renderer.layout();
        renderer.createPDF(os);
        return os;
    }

为了解决这个问题，尝试用最简单的页面不断试错。

解决办法：在标签中声明一个支持中文的字体

<body style="font-family: SimSun">

为了确保在HTML中使用的字体在PDF中能够正确显示。可以尝试使用其他常见的中文字体，如SimSun, 宋体, Arial Unicode MS等。

需要注意的是，要在后端代码中声明字体：fontResolver.addFont(font, BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);

利用截图的方法生成pdf文件：

var targetWindow = document.querySelector('#targetWindow');
html2canvas(targetWindow, {
	onrendered: function(canvas) {
		// 显示截图
		// var screenshotDiv = document.getElementById('screenshot');
		// screenshotDiv.appendChild(canvas);
		var pdf = new jspdf.jsPDF(); // 更新这里的变量名为 jspdf.jsPDF()
		pdf.addImage(canvas, 'JPEG', 0, 0, 210, 297); // A4 尺寸
		pdf.save('page-content.pdf');
	}
});

__浮生一梦丨っ

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于HTML转PDF中文无法显示的问题

为了确保在HTML中使用的字体在PDF中能够正确显示。可以尝试使用其他常见的中文字体，如SimSun, 宋体, Arial Unicode MS等。为了解决这个问题，尝试用最简单的页面不断试错。如下图，输出后的PDF中，除了。，剩下的字符全部不显示。HTML转PDF代码。
复制链接

扫一扫