Pdfjs dist 填坑日記

vue mobile 專案中乙個需求是預覽pdf，需要能加水印，可以縮放，另外需要無汙染零新增。找到了pdfjs-dist。

h5實現，功能比較強大。

文件真的一般。

網上找了個例子，寫上，發現好用。

let vm = this; 

let url = ***xx;
var canvas = document.getelementbyid('the-canvas');
pdfjs.getdocument(
url).then(function (pdf) 
var viewport = page.getviewport(vm.scale);
var context = canvas.getcontext('2d');
vm.initflag = false;
canvas.height = viewport.height;
canvas.width = viewport.width;
context.globalcompositeoperation='source-over';
context.globalalpha=0.2;
var rendercontext = ;
page.render(rendercontext);
document.queryselector('.scroll-content-info').style.width = document.queryselector('#the-canvas').getboundingclientrect().width + 'px';
vm.$refs.scroll.refresh();
util.setloading(!1);
!vm.pdfwatermark && util.getuserinfo(vm.addwatermarker);
});});
pdfjs.getdocument().then(function (pdfdoc_) ).catch(function (err) 
})

突然問題又來了，原來的版本是基於canvas的 ，如果使用pdf縮放功能（自己實現）。那麼就需要對canvas進行重繪。這樣會導致ui出現閃爍的情況，使用者體驗非常不好。那麼怎麼辦呢？

找了半天毫無頭緒，看看pdfjs-dist 原始碼發現有svg的實現。發現 可以這麼用

let vm = this;

pdfjs.getdocument().then(function(pdf) 
var anchor = document.createelement('a');
anchor.setattribute('name', 'page=' + i);
anchor.setattribute('class', 'pdfatag');
anchor.setattribute('title', 'page ' + i);
// using promise to fetch and render the next page
promise = promise.then(function (pagenum, anchor) );
});});
}.bind(null, i, anchor));
}});

pdfjs-dist相關文件：

Git填坑日記

問題 cmd命令列在進行http傳輸的時候輸不了密碼 解決 使用git bash來輸入 問題 git在通過http clone的時候使用者名稱是你的登入時的使用者名稱，密碼是你自己另外設定的密碼 問題 git最常用的指令 add commit push 解決 如果提示沒東西push的話你一定是忘了之...

pdfjs dist外掛程式的踩坑

新入職的一家公司，一開始去要求要改乙個bug，是關於pdf檔案上傳的問題。專案中用到了pdfjs dist外掛程式。bug是這樣的，檔案獲取不到。一開始是在頁面中引用 import pdfjs from pdfjs dist import pdfworker from pdfjs dist buil...

十二 VueJs 填坑日記之專案打包發布

打包專案 進入到我們的專案根目錄 d cd vueworks my vue 然後執行如下 進行打包 npm run build結果如下 現在我們已經把專案打包好，打完好的專案預設位置在 dist資料夾裡。我們從打包時的cmd的日誌來看，裡面有很多的map檔案的生成，由於截圖有限，上面只是擷取了結尾，...