在h5上使用webview加载hybrid的pdfjs-dist最新版本,会出现canvas画出的文字那些是2倍，导致变成下图这样
但是把pdfjs单独拿出来使用就不会有这个问题，请问是什么原因呢？
请看demo，直接运行到浏览器然后点击打开webview页面，渲染出来的文字不在画布上，但是你单独拿出来运行（请看pdfViewer）压缩包，拿出来使用webstorm运行还是什么的都可以，进入index.html就是渲染正常的。请问需要怎么做才能正常啊？
靐齉齾麤龖龗
- 发布：2024-11-01 09:41
- 更新：2025-03-20 15:43
- 阅读：194
但是把pdfjs单独拿出来使用就不会有这个问题，请问是什么原因呢？
请看demo，直接运行到浏览器然后点击打开webview页面，渲染出来的文字不在画布上，但是你单独拿出来运行（请看pdfViewer）压缩包，拿出来使用webstorm运行还是什么的都可以，进入index.html就是渲染正常的。请问需要怎么做才能正常啊？
靐齉齾麤龖龗 (作者) - 解决不了问题，那就解决提出问题的人
知道了，，，放到uniapp里面的pdfjs应用于canvas的css丢失了。。。
:is(.pdfViewer .canvasWrapper) canvas {
margin: 0;
display: block;
width: 100%;
height: 100%;
}这一段没有选中。。。
去看了一下编译后的源码，，给我把canvas转成了uni-canvas。。。
针对“uniapp将canvas转成了uni-canvas”的一种新的解决方案，就是修改一下viewer.mjs源码，在动态创建canvas的时候，增加一个className，然后在viewer.html中指定canvas样式，修改如下：
- viewer.mjs找到_createCanvas这个方法
找到const canvas = (this.canvas = document.createElement('canvas'))这行代码，然后canvas.className = 'pdf-canvas'增加一行代码指定canvas的className; - 修改viewer.html文件
<head>标签里面增加以下代码：<style> .pdf-canvas { position: absolute; top: 0; left: 0; margin: 0; display: block; width: 100%; height: 100%; contain: content; } </style>
吐槽：社区的这个回复内容的富文本编辑器真难用，一脸嫌弃中。
y***@winshang.com
大佬 你这是做了h5嵌入到哪还是怎么样 我那个h5预览页一但嵌入到小程序就是空白页面，如果canvas标签用uni-canvas的话pdfjs又会报错 什么width为undefined。麻了
2025-01-06 17:38
靐齉齾麤龖龗 (作者)
回复 y***@winshang.com: 因为小程序的webview只能使用网络路径
2025-01-06 17:40
靐齉齾麤龖龗 (作者)
而且小程序的webview里面的文件路径也要添加到白名单中才能使用，你只要知道在小程序中所有网络路径都要添加到白名单就对了
2025-01-06 17:42