使用场景 项目需求 webview嵌入页 直接使用iframe 标签嵌入pdf文件链接 在webview中直接不显示 在谷歌浏览器正常 在安卓移动端浏览器 直接显示下载pdf文件 经测试 下面步骤完全可以使 安卓和ios webview嵌入页正常显示和操作
第一步下载pdfjs包
下载包: http://mozilla.github.io/pdf.js/getting_started/#download
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/dc7ef30f57b727c7.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWRvbmcxNjY1LmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70)
第二步解压包
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/e62700fe09f8933e.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWRvbmcxNjY1LmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70)
第三步 部署服务
把这个 解压完的包 重命名pdfjs ,上传到 你pdf文件所在的服务器 比如说 oss等
![在这里插入图片描述](https://img.php1.cn/3cd4a/94ce/a6e/865776f6fe3d5f59.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWRvbmcxNjY1LmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70)
第四步
打开 你这个服务器的网址 我这里上传完得到的 oss 网址
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/4283cd4bbba41b87.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWRvbmcxNjY1LmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70)
这个文件打开成功 你就完成了一半了 如果没打开 请看前三步
第五步
在链接后面 拼上你的 pdf文件链接 未成功 请看前四步
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/67cc2e96eddffff8.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWRvbmcxNjY1LmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70)
效果图如下
![在这里插入图片描述](https://img.php1.cn/3cd4a/1eebe/cd5/45a090220e38e09d.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWRvbmcxNjY1LmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70)
如何在页面中 加载呢?
这里使用了iframe标签把第五步的url写入
let pdf = ''
$('#main').append(pdf)