提高PDF预览的清晰度

最新推荐文章于 2024-03-29 11:23:24 发布

易de

最新推荐文章于 2024-03-29 11:23:24 发布

阅读量3.8k

点赞数 2

分类专栏： vue 经验文章标签： pdfjs-dist 插件

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/120182433

版权

本文介绍了两种方法来提高PDF预览的清晰度。首先，通过调整`window.devicePixelRatio`以改变设备像素比，提升显示质量。其次，利用CSS的`transform`属性，特别是`matrix()`函数，先在canvas上绘制2倍大小的PDF，再通过CSS缩小到实际尺寸，实现清晰的缩放效果。这两种技术结合，能显著改善PDF在预览时的细节表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心代码

let devicePixelRatio = window.devicePixelRatio || 1;
console.log(window.devicePixelRatio)
 let backingStoreRatio =
          context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          context.msBackingStorePixelRatio ||
          context.oBackingStorePixelRatio ||
          context.backingStorePixelRatio ||
          1
that.pixelRatio = devicePixelRatio / backingStoreRatio;
console.log('devicePixelRatio:',devicePixelRatio,',backingStoreRatio:',backingStoreRatio,',pixelRatio:',that.pixelRatio);
if (that.pixelRatio !== 1) that.transform = [that.pixelRatio, 0, 0, that.pixelRatio, 0, 0]

其一：改变设备像素比
在这里插入图片描述