pdf.js 网页如何解决pdf预览的问题,以及网页pdf搜索高亮的问题

317 阅读1分钟

昨晚前端同事为了一个需求 抓耳挠撒;经过我1天不谢的努力搜索;也终于解决了这个问题;

今天写下这篇文章也是【好记性不如烂笔头】,后期如果再次遇到此次pdf的需求;也能安然度过;

需求主要是2点:

1、将pdf 流文件渲染到页面上;这个是已经实现的;

2、在1的基础上 实现搜索高亮;

我去网上搜索;让我搜索到了火狐的PDF.js;

然后我就去兴高采烈的去github主页去查找;找到了相关的例子;

我就把源码down下来了;

但是本地运行困难重重;【最终也没打起包来,不过跑起来了】;

 - 其中的npm依赖项:canvas;是需要原生构建的【xcode 、windows-build-tools】;

这这两者 装不起来;至此打包中断;

我本地是:node 14.15.1版本;其中源码涉及的replaceAll 需要node 15版本以上的支持;

切换node版本之后又遇到了canvas原生打包的问题;

后来我想了下, 我也不需要去用源码构建; 我只是想用其中的viewer.html页面放在我自己的项目重;然后通过viewer.html?file=xxxx.pdf去预览就可以了;

所以经过gpt4的指导下, 去github主页找到了release版本;

donw下来之后,起了一个简单的静态服务器;果然跑起来了;

到此需求解决ok;后续有需要或者定制化的时候再去解决本地源码运行的问题吧;

相关链接pdf.js的Github链接👉 去这里

Thanks