Webview加載pdf遇到的一些坑及解決方法
大廠技術(shù)??高級前端??Node進(jìn)階
點(diǎn)擊上方?程序員成長指北，關(guān)注公眾號
回復(fù)1，加入高級Node交流群
問題來源
問題一切的來源還是得從那天說起...
有一天產(chǎn)品小王拿著電腦興致勃勃的來到我的工位旁：“誒，小付，這里有個(gè)在線pdf預(yù)覽的功能，你看下能不能做。”
聽完我心中暗想：這還不簡單，加載在線pdf不就和加載網(wǎng)頁一樣的，webview加上pdf鏈接，搞定！
這一想完，立即比了個(gè)OK：“沒問題，簡單！”
說完立馬開干，新建項(xiàng)目，準(zhǔn)備好webview，pdf鏈接，webView?.loadUrl("https://www.gjtool.cn/pdfh5/git.pdf")，點(diǎn)擊Run，滿心歡喜等待pdf加載出來的那一刻。
咦？怎么一片空白，難道是webview設(shè)置項(xiàng)有問題，但是加載網(wǎng)頁一點(diǎn)問題都沒啊。這時(shí)候瞥見隔壁iOS老大哥已經(jīng)成功加載出pdf了，一問也是用webview加載的，那為啥擱我這就不行？看不起我？
帶著疑惑查了下。
原來Android的webview壓根就不支持加載pdf。
Android與iOS不同，iOS加載pdf，不管本地還是在線，直接使用webview渲染就可以了，而Android卻做不到。
那該怎樣去加載pdf？
加載的方案有很多，比如直接跳到第三方瀏覽器加載，但產(chǎn)品要求只能在app內(nèi)部預(yù)覽，pass；比如在pdf鏈接前加上谷歌服務(wù)，但在國內(nèi)是無法訪問的，pass；比如下載后再進(jìn)行加載，但當(dāng)pdf體積大且網(wǎng)絡(luò)不好時(shí)，下載就會出現(xiàn)問題，又pass；
方式有多種，第三方的輪子也有很多，但適合自己的開發(fā)需求，以及滿足UI設(shè)計(jì)，則就需要進(jìn)行二次改造了。
經(jīng)過多方對比，使用webview加載pdf的方案更符合大多數(shù)的場景。
以下就會從webview加載pdf的方案出發(fā)，描述在開發(fā)時(shí)所涉及到的問題點(diǎn)。
我的爬坑之旅開始了！
初步加載
webview加載pdf的初步設(shè)想是使用js的方式去渲染，
新建一個(gè)js
var?url?=?location.search.substring(1);
PDFJS.cMapUrl?=?'https://unpkg.com/[email protected]/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;
????????}
????
????
????