Webview加载pdf遇到的一些坑及解决方法
大厂技术 高级前端 Node进阶
点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群
问题来源
问题一切的来源还是得从那天说起...
有一天产品小王拿着电脑兴致勃勃的来到我的工位旁：“诶，小付，这里有个在线pdf预览的功能，你看下能不能做。”
听完我心中暗想：这还不简单，加载在线pdf不就和加载网页一样的，webview加上pdf链接，搞定！
这一想完，立即比了个OK：“没问题，简单！”
说完立马开干，新建项目，准备好webview，pdf链接，webView?.loadUrl("https://www.gjtool.cn/pdfh5/git.pdf")，点击Run，满心欢喜等待pdf加载出来的那一刻。
咦？怎么一片空白，难道是webview设置项有问题，但是加载网页一点问题都没啊。这时候瞥见隔壁iOS老大哥已经成功加载出pdf了，一问也是用webview加载的，那为啥搁我这就不行？看不起我？
带着疑惑查了下。
原来Android的webview压根就不支持加载pdf。
Android与iOS不同，iOS加载pdf，不管本地还是在线，直接使用webview渲染就可以了，而Android却做不到。
那该怎样去加载pdf？
加载的方案有很多，比如直接跳到第三方浏览器加载，但产品要求只能在app内部预览，pass；比如在pdf链接前加上谷歌服务，但在国内是无法访问的，pass；比如下载后再进行加载，但当pdf体积大且网络不好时，下载就会出现问题，又pass；
方式有多种，第三方的轮子也有很多，但适合自己的开发需求，以及满足UI设计，则就需要进行二次改造了。
经过多方对比，使用webview加载pdf的方案更符合大多数的场景。
以下就会从webview加载pdf的方案出发，描述在开发时所涉及到的问题点。
我的爬坑之旅开始了！
初步加载
webview加载pdf的初步设想是使用js的方式去渲染，
新建一个js
var url = location.search.substring(1);
PDFJS.cMapUrl = 'https://unpkg.com/pdfjs-dist@1.9.426/cmaps/';
PDFJS.cMapPacked = true;
var pdfDoc = null;
function createPage() {
var div = document.createElement("canvas");
document.body.appendChild(div);
return div;
}
function renderPage(num) {
pdfDoc.getPage(num).then(function (page) {
var viewport = page.getViewport(2.0);
var canvas = createPage();
var ctx = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({
canvasContext: ctx,
viewport: viewport
});
});
}
PDFJS.getDocument(url).then(function (pdf) {
pdfDoc = pdf;
for (var i = 1; i <= pdfDoc.numPages; i++) {
renderPage(i)
}
});
新建Html
"en">
"UTF-8">
"viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=4.0,user-scalable=no"/>
Document
type="text/css">
canvas {
width: 100%;
height: 100%;
border: 1px solid black;
}