js教程pdf

A. wpsjs瀹忎繚瀛樹負pdf

璇烽棶浣犳槸鎯抽棶鈥渨psjs瀹忓備綍淇濆瓨涓簆df鈥濊繖涓闂棰樺悧錛焪psjs瀹忎繚瀛樹負pdf鐨勬搷浣滃備笅錛
宸ュ叿錛氱數鑴戙亀ps杞浠躲
1銆佹墦寮WPS琛ㄦ牸錛岀『淇濇枃妗ｄ腑鍚鏈夐渶瑕佷繚瀛樼殑瀹忋
2銆佸湪宸ュ叿鏍忎腑鎵懼埌鈥滃畯鈥濋夐」錛岄氬父鍙浠ュ湪鈥滃父瑙勨濇垨鈥滃紑鍙戣呪濋夐」鍗′笅鎵懼埌銆
3銆佺偣鍑燴滃畯鈥濋夐」錛岀劧鍚庨夋嫨鈥滃畯綆＄悊鍣ㄢ濇垨綾諱技閫夐」銆傝繖灝嗘墦寮瀹忕＄悊鍣ㄥ硅瘽妗嗐
4銆佸湪瀹忕＄悊鍣ㄤ腑錛岄夋嫨鎮ㄨ佷繚瀛樹負PDF鐨勫畯錛屽苟鐐瑰嚮鈥滅紪杈戔濇寜閽銆
5銆佸湪瀹忕紪杈戝櫒涓錛岀偣鍑燴滄枃浠垛濊彍鍗曪紝閫夋嫨鈥滃彟瀛樹負鈥濋夐」銆
6銆佸湪鍙﹀瓨涓哄硅瘽妗嗕腑錛岄夋嫨淇濆瓨浣嶇疆錛屼慨鏀規枃浠跺悕錛屽苟灝嗘枃浠剁被鍨嬭劇疆涓篜DF鏍煎紡銆
7銆佺偣鍑燴滀繚瀛樷濇寜閽錛屽皢瀹忎繚瀛樹負PDF鏂囦歡銆

B. 濡備綍浣跨敤Node.js鐖鍙栦換鎰忕綉欏佃祫婧愬苟杈撳嚭PDF鏂囦歡鍒版湰鍦

闇奼傦細


浣跨敤Node.js鐖鍙栫綉欏佃祫婧愶紝寮綆卞嵆鐢ㄧ殑閰嶇疆
灝嗙埇鍙栧埌鐨勭綉欏靛唴瀹逛互PDF鏍煎紡杈撳嚭
濡傛灉浣犳槸涓鍚嶆妧鏈浜哄憳錛岄偅涔堝彲浠ョ湅鎴戞帴涓嬫潵鐨勬枃絝狅紝鍚﹀垯錛岃風洿鎺ョЩ姝ュ埌鎴戠殑github浠撳簱錛岀洿鎺ョ湅鏂囨。浣跨敤鍗沖彲


浠撳簱鍦板潃:闄勫甫鏂囨。鍜屾簮鐮


鏈闇奼備嬌鐢ㄥ埌鐨勬妧鏈錛歂ode.js鍜宲uppeteer


puppeteer 瀹樼綉鍦板潃: puppeteer鍦板潃
Node.js瀹樼綉鍦板潃:閾炬帴鎻忚堪
Puppeteer鏄璋鋒瓕瀹樻柟鍑哄搧鐨勪竴涓閫氳繃DevTools鍗忚鎺у埗headless Chrome鐨凬ode搴撱傚彲浠ラ氳繃Puppeteer鐨勬彁渚涚殑api鐩存帴鎺у埗Chrome妯℃嫙澶ч儴鍒嗙敤鎴鋒搷浣滄潵榪涜孶I Test鎴栬呬綔涓虹埇鉶璁塊棶欏甸潰鏉ユ敹闆嗘暟鎹銆
鐜澧冨拰瀹夎
Puppeteer鏈韜渚濊禆6.4浠ヤ笂鐨凬ode錛屼絾鏄涓轟簡寮傛ヨ秴綰уソ鐢ㄧ殑async/await錛屾帹鑽愪嬌鐢7.6鐗堟湰浠ヤ笂鐨凬ode銆傚彟澶杊eadless Chrome鏈韜瀵規湇鍔″櫒渚濊禆鐨勫簱鐨勭増鏈瑕佹眰姣旇緝楂橈紝centos鏈嶅姟鍣ㄤ緷璧栧嚲紼沖畾錛寁6寰堥毦浣跨敤headless Chrome錛屾彁鍗囦緷璧栫増鏈鍙鑳藉嚭鐜板悇縐嶆湇鍔″櫒闂棰橈紙鍖呮嫭涓斾笉闄愪簬鏃犳硶浣跨敤ssh錛夛紝鏈濂戒嬌鐢ㄩ珮鐗堟湰鏈嶅姟鍣ㄣ傦紙寤鴻浣跨敤鏈鏂扮増鏈鐨凬ode.js錛
灝忚瘯鐗涘垁錛岀埇鍙栦含涓滆祫婧


const puppeteer = require('puppeteer'); // 寮曞叆渚濊禆
(async () => { //浣跨敤async鍑芥暟瀹岀編寮傛
const browser = await puppeteer.launch(); //鎵撳紑鏂扮殑嫻忚堝櫒
const page = await browser.newPage(); // 鎵撳紑鏂扮殑緗戦〉
await page.goto('https://www.jd.com/'); //鍓嶅線閲岄潰 'url' 鐨勭綉欏
const result = await page.evaluate(() => { //榪欎釜result鏁扮粍鍖呭惈鎵鏈夌殑鍥劇墖src鍦板潃
let arr = []; //榪欎釜綆澶村嚱鏁板唴閮ㄥ啓澶勭悊鐨勯昏緫
const imgs = document.querySelectorAll('img');
imgs.forEach(function (item) {
arr.push(item.src)
})
return arr
});
// '姝ゆ椂鐨剅esult灝辨槸寰楀埌鐨勭埇鉶鏁版嵁錛屽彲浠ラ氳繃'fs'妯″潡淇濆瓨'
})()
澶嶅埗榪囧幓 浣跨敤鍛戒護琛屽懡浠 ` node 鏂囦歡鍚 ` 灝卞彲浠ヨ繍琛岃幏鍙栫埇鉶鏁版嵁浜 榪欎釜 puppeteer 鐨勫寘 錛屽叾瀹炴槸鏇挎垜浠寮鍚浜嗗彟涓涓嫻忚堝櫒錛岄噸鏂板幓寮鍚緗戦〉錛岃幏鍙栧畠浠鐨勬暟鎹銆


涓婇潰鍙鐖鍙栦簡浜涓滈栭〉鐨勫浘鐗囧唴瀹癸紝鍋囪炬垜鐨勯渶奼傝繘涓姝ユ墿澶э紝闇瑕佺埇鍙栦含涓滈栭〉涓鐨勬墍鏈<a> 鏍囩懼瑰簲鐨勮煩杞緗戦〉涓鐨勬墍鏈 title鐨勬枃瀛楀唴瀹癸紝鏈鍚庢斁鍒頒竴涓鏁扮粍涓銆
鎴戜滑鐨刟sync鍑芥暟涓婇潰涓鍏卞垎浜嗕簲姝ワ紝 鍙鏈 puppeteer.launch() ,browser.newPage(), browser.close() 鏄鍥哄畾鐨勫啓娉曘
page.goto 鎸囧畾鎴戜滑鍘誨摢涓緗戦〉鐖鍙栨暟鎹錛屽彲浠ユ洿鎹㈠唴閮╱rl鍦板潃錛屼篃鍙浠ュ氭¤皟鐢ㄨ繖涓鏂規硶銆
page.evaluate 榪欎釜鍑芥暟錛屽唴閮ㄦ槸澶勭悊鎴戜滑榪涘叆鎯寵佺埇鍙栫綉欏電殑鏁版嵁閫昏緫
page.goto鍜宲age.evaluate涓や釜鏂規硶錛屽彲浠ュ湪async鍐呴儴璋冪敤澶氭★紝閭ｆ剰鍛崇潃鎴戜滑鍙浠ュ厛榪涘叆浜涓滅綉欏碉紝澶勭悊閫昏緫鍚庯紝鍐嶆¤皟鐢╬age.goto榪欎釜鍑芥暟
娉ㄦ剰錛屼笂闈㈣繖涓鍒囬昏緫錛岄兘鏄痯uppeteer榪欎釜鍖呭府鎴戜滑鍦ㄧ湅涓嶈佺殑鍦版柟寮鍚浜嗗彟澶栦竴涓嫻忚堝櫒錛岀劧鍚庡勭悊閫昏緫錛屾墍浠ユ渶緇堣佽皟鐢╞rowser.close()鏂規硶鍏抽棴閭ｄ釜嫻忚堝櫒銆

榪欐椂鍊欐垜浠瀵逛笂涓綃囩殑浠ｇ爜榪涜屼紭鍖栵紝鐖鍙栧瑰簲鐨勮祫婧愩

const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.jd.com/');
const hrefArr = await page.evaluate(() => {
let arr = [];
const aNodes = document.querySelectorAll('.cate_menu_lk');
aNodes.forEach(function (item) {
arr.push(item.href)
})
return arr
});
let arr = [];
for (let i = 0; i < hrefArr.length; i++) {
const url = hrefArr[i];
console.log(url) //榪欓噷鍙浠ユ墦鍗
await page.goto(url);
const result = await page.evaluate(() => { //榪欎釜鏂規硶鍐呴儴console.log鏃犳晥
return $('title').text(); //榪斿洖姣忎釜鐣岄潰鐨則itle鏂囧瓧鍐呭
});
arr.push(result) //姣忔″驚鐜緇欐暟緇勪腑娣誨姞瀵瑰簲鐨勫
}
console.log(arr) //寰楀埌瀵瑰簲鐨勬暟鎹 鍙浠ラ氳繃Node.js鐨 fs 妯″潡淇濆瓨鍒版湰鍦
await browser.close()
})()
涓婇潰鏈夊ぉ鍧 page.evaluate鍑芥暟鍐呴儴鐨刢onsole.log涓嶈兘鎵撳嵃錛岃屼笖鍐呴儴涓嶈兘鑾峰彇澶栭儴鐨勫彉閲,鍙鑳絩eturn榪斿洖錛
浣跨敤鐨勯夋嫨鍣ㄥ繀欏誨厛鍘誨瑰簲鐣岄潰鐨勬帶鍒跺彴瀹為獙榪囪兘涓嶈兘閫夋嫨DOM鍐嶄嬌鐢錛屾瘮濡備含涓滄棤娉曚嬌鐢╭uerySelector銆傝繖閲岀敱浜
浜涓滅殑鍒嗙晫闈㈤兘浣跨敤浜唈Query錛屾墍浠ユ垜浠鍙浠ョ敤jQuery錛屾諱箣浠栦滑寮鍙戣兘鐢ㄧ殑閫夋嫨鍣錛屾垜浠閮藉彲浠ョ敤錛屽惁鍒欏氨涓嶅彲浠ャ


鎺ヤ笅鏉ユ垜浠鐩存帴鏉ョ埇鍙朜ode.js鐨勫畼緗戦栭〉鐒跺悗鐩存帴鐢熸垚PDF


鏃犺烘偍鏄鍚︿簡瑙Node.js鍜宲uppeteer鐨勭埇鉶鐨勪漢鍛橀兘鍙浠ユ搷浣滐紝璇鋒偍涓瀹氫竾鍒嗕粩緇嗛槄璇繪湰鏂囨。騫舵寜欏哄簭鎵ц屾瘡涓姝


鏈欏圭洰瀹炵幇闇奼傦細緇欐垜浠涓涓緗戦〉鍦板潃錛岀埇鍙栦粬鐨勭綉欏靛唴瀹癸紝鐒跺悗杈撳嚭鎴愭垜浠鎯寵佺殑PDF鏍煎紡鏂囨。錛岃鋒敞鎰忥紝鏄楂樿川閲忕殑PDF鏂囨。


絎涓姝ワ紝瀹夎匩ode.js ,鎺ㄨ崘http://nodejs.cn/download/錛孨ode.js鐨勪腑鏂囧畼緗戜笅杞藉瑰簲鐨勬搷浣滅郴緇熷寘

絎浜屾ワ紝鍦ㄤ笅杞藉畨瑁呭畬浜哊ode.js鍚庯紝 鍚鍔╳indows鍛戒護琛屽伐鍏(windows涓嬪惎鍔ㄧ郴緇熸悳緔㈠姛鑳斤紝杈撳叆cmd錛屽洖杞︼紝灝卞嚭鏉ヤ簡)

絎涓夋 闇瑕佹煡鐪嬬幆澧冨彉閲忔槸鍚﹀凡緇忚嚜鍔ㄩ厤緗,鍦ㄥ懡浠よ屽伐鍏蜂腑杈撳叆 node -v錛屽傛灉鍑虹幇 v10. ***瀛楁碉紝鍒欒存槑鎴愬姛瀹夎匩ode.js

絎鍥涙 濡傛灉鎮ㄥ湪絎涓夋ュ彂鐜拌緭鍏node -v榪樻槸娌℃湁鍑虹幇 瀵瑰簲鐨勫瓧孌碉紝閭ｄ箞璇鋒偍閲嶅惎鐢佃剳鍗沖彲

絎浜旀 鎵撳紑鏈欏圭洰鏂囦歡澶癸紝鎵撳紑鍛戒護琛屽伐鍏鳳紙windows緋葷粺涓鐩存帴鍦ㄦ枃浠剁殑url鍦板潃鏍忚緭鍏cmd灝卞彲浠ユ墦寮浜嗭級錛岃緭鍏 npm i cnpm nodemon -g

絎鍏姝 涓嬭澆puppeteer鐖鉶鍖咃紝鍦ㄥ畬鎴愮浜旀ュ悗錛屼嬌鐢╟npm i puppeteer --save 鍛戒護 鍗沖彲涓嬭澆

絎涓冩 瀹屾垚絎鍏姝ヤ笅杞藉悗錛屾墦寮鏈欏圭洰鐨剈rl.js錛屽皢鎮ㄩ渶瑕佺埇鉶鐖鍙栫殑緗戦〉鍦板潃鏇挎崲涓婂幓(榛樿ゆ槸http://nodejs.cn/)

絎鍏姝 鍦ㄥ懡浠よ屼腑杈撳叆 nodemon index.js 鍗沖彲鐖鍙栧瑰簲鐨勫唴瀹癸紝騫朵笖鑷鍔ㄨ緭鍑哄埌褰撳墠鏂囦歡澶逛笅闈㈢殑index.pdf鏂囦歡涓
TIPS: 鏈欏圭洰璁捐℃濇兂灝辨槸涓涓緗戦〉涓涓狿DF鏂囦歡錛屾墍浠ユ瘡嬈＄埇鍙栦竴涓鍗曠嫭欏甸潰鍚庯紝璇鋒妸index.pdf鎷瘋礉鍑哄幓錛岀劧鍚庣戶緇鏇存崲url鍦板潃錛岀戶緇鐖鍙栵紝鐢熸垚鏂扮殑PDF鏂囦歡錛屽綋鐒訛紝鎮ㄤ篃鍙浠ラ氳繃寰鐜緙栬瘧絳夋柟寮忓幓涓嬈℃х埇鍙栧氫釜緗戦〉鐢熸垚澶氫釜PDF鏂囦歡銆


瀵瑰簲鍍忎含涓滈栭〉榪欐牱鐨勫紑鍚浜嗗浘鐗囨噿鍔犺澆鐨勭綉欏碉紝鐖鍙栧埌鐨勯儴鍒嗗唴瀹規槸loading鐘舵佺殑鍐呭癸紝瀵逛簬鏈変竴浜涘弽鐖鉶鏈哄埗鐨勭綉欏碉紝鐖鉶涔熶細鍑虹幇闂棰橈紝浣嗘槸緇濆ぇ澶氭暟緗戠珯閮芥槸鍙浠ョ殑

const puppeteer = require('puppeteer');
const url = require('./url');
(async () => {
const browser = await puppeteer.launch({ headless: true })
const page = await browser.newPage()
//閫夋嫨瑕佹墦寮鐨勭綉欏
await page.goto(url, { waitUntil: 'networkidle0' })
//閫夋嫨浣犺佽緭鍑虹殑閭ｄ釜PDF鏂囦歡璺寰勶紝鎶婄埇鍙栧埌鐨勫唴瀹硅緭鍑哄埌PDF涓錛屽繀欏繪槸瀛樺湪鐨凱DF錛屽彲浠ユ槸絀哄唴瀹癸紝濡傛灉涓嶆槸絀虹殑鍐呭筆DF錛岄偅涔堜細瑕嗙洊鍐呭
let pdfFilePath = './index.pdf'
//鏍規嵁浣犵殑閰嶇疆閫夐」錛屾垜浠榪欓噷閫夋嫨A4綰哥殑瑙勬牸杈撳嚭PDF錛屾柟渚挎墦鍗
await page.pdf({
path: pdfFilePath,
format: 'A4',
scale: 1,
printBackground: true,
landscape: false,
displayHeaderFooter: false
});
await browser.close()
})()
鏂囦歡瑙ｆ瀯璁捐




鏁版嵁鍦ㄨ繖涓鏃朵唬闈炲父鐝嶈吹錛屾寜鐓х綉欏電殑璁捐￠昏緫錛岄夊畾鐗瑰畾鐨刪ref鐨勫湴鍧錛屽彲浠ュ厛鐩存帴鑾峰彇瀵瑰簲鐨勮祫婧愶紝涔熷彲浠ラ氳繃鍐嶆′嬌鐢 page.goto鏂規硶榪涘叆錛屽啀璋冪敤 page.evaluate() 澶勭悊閫昏緫錛屾垨鑰呰緭鍑哄瑰簲鐨凱DF鏂囦歡錛屽綋鐒朵篃鍙浠ヤ竴鍙ｆ皵杈撳嚭澶氫釜PDF鏂囦歡~


榪欓噷灝變笉鍋氳繃澶氫粙緇嶄簡錛屾瘯絝 Node.js 鏄鍙浠ヤ笂澶╃殑錛屾垨璁告湭鏉ュ畠鐪熺殑浠涔堥兘鑳藉仛銆傝繖涔堜紭璐ㄧ畝鐭鐨勬暀紼嬶紝璇鋒敹鈃
鎴栬呰漿鍙戠粰鎮ㄧ殑鏈嬪弸錛岃阿璋銆

C. 如何用nodejs把word轉成pdf

如果你用2007版或以上的WORD軟體、WPS Office系統，可將WORD文檔另存PDF格式，即可將WORD文檔轉換為PDF格式； 如果你用的是2003版或以下的WORD軟體，請安裝Adobe Acrobat XI Pro軟體，用Adobe PDF列印機列印你要輸出的內容，即可得到PDF格式文檔。

D. pdfh5.js不顯示pdf水印

水印設置了透明度。pdf是由Adobe Systems用於與應用程序、操作系統、硬體無關的方式進行文件交換所發展出的文件格式。不顯示水印是因為設置了透明度。解決方法：
1、首先在電腦上安裝好梁源纖PDF編輯器後，鼠裂清標右鍵點擊要編輯的PDF文件，在打開方式中選擇使用PDF編輯器打開。
2、其次在菜單欄中，依次點擊「文檔」-「水印」-「管理」，編輯水印,在「管理水印」對話框中，選擇需要編輯的水印，點擊「編輯」。
3、最後在彈出的「編輯水印橡仿」對話框中，可以在外觀選項中設置PDF水印的透明度,在頁面范圍選項中設置好使用范圍，點擊「確定」即可。

E. 如何創建pdf的buffer，讓pdf.js實現預覽pdf文件

PDF.js 是基於開放的 HTML5 及 javaScript 技術實現的開源產品。簡單說就是一個 PDF 解析器。運用HTML5JavaScript（即pdf.js僅使用安全的web語言，不包含任何攻擊者可以用的本地代碼塊）的PDF閱讀器pdf.js，直接在標準的HTML頁面上載入和渲染PDF文件, 還可以提高安全性（不需要安裝第三方插件，安全性由瀏覽器保證），瀏覽器所做的安全措施已經為pdf.js提供了安全的運行環境。其對IE和 FireFox瀏覽器的要求是IE9+, FireFox19+。
在線示例： http://jsbin.com/pdfjs-helloworld-v2/1/edit ， http://jsbin.com/pdfjs-prevnext-v2/1/edit
源碼：https://github.com/mozilla/pdf.js
官網：http://mozilla.github.io/pdf.js/

pdf.js VS 傳統瀏覽器讀取pdf

一般來說，PDF檔案格式都是在瀏覽器中由外掛程式來描繪，通常是Adobe自己的PDF reader或來自其他供應商的描繪工具，但這些外掛通常無法充分運用PDF的特點，而且由於含有大量的受信任代碼，使得Google Chrome瀏覽器必須運用SandBox沙箱原理，來檢查PDF描繪工具是否遭到未知病毒感染。
使用adobe，必須在本地安裝軟體才能使用，而pdf.js不依賴環境、渲染速度快（測試過，確實很快）、安全性高。

pdf.js渲染PDF文件
pdf.js渲染PDF文件的流程：Fetch pdf (url / buffer) ——> canvas ——> 渲染
如果要深入pdf的渲染，需要去研究pdf.js源代碼。pdf.js可通過pdf文件的地址或pdf數據流獲取pdf，具體實現是調用介面函數 PDFJs.getDoc(url/buffer)將pdf載入html，通過canvas處理, 然後渲染pdf文件。網上給出的都是通過url來獲取pdf的例子，而我在做項目的時候，後台（python）要求是發pdf的數據流給前台，前台接收pdf的buffer,然後通過pdf.js來渲染。當然最初嘗試buffer出現了很多問題，具體問題總結如下：
1）如何通過$.ajax接收後台發給前台的buffer數據；
2）如何將buffer傳給pdf.js來處理（這里我使用了viewer.js, 所以需要考慮的是如何將buffer傳給viewer.js來處理）；
3）如何將pdf.js轉換成pdf.js可以接收的buffer格式；
（對應問題解決見代碼注釋）
註：viewer.js是pdf.js的擴展，其將列印、翻頁、縮放等功能進行了實現，且界面非常好看。也就是說如果你引入了viewer.js，pdf的渲染和渲染之後的功能界面都已經幫你實現了，你不用自己去寫界面。

先從官網：http://mozilla.github.io/pdf.js/ 下載代碼，然後使用文件viewer.html , 我的html就是在viewer.html 的基礎上修改的，下面我給出buffer的例子：
<!DOCTYPE html>
<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="google" content="notranslate">
<title>在線預覽</title>
{% load static %}{% get_static_prefix as STATIC_URL %}
<link href="{{STATIC_URL}}css/preview.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{STATIC_URL}}pdfjs/web/viewer.css"/>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/compatibility.js"></script>
<link rel="resource" type="application/l10n" href="{{STATIC_URL}}pdfjs/web/locale/locale.properties"/>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/l10n.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/build/pdf.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/debugger.js"></script>
<script src="{{STATIC_URL}}js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">

//convertDataURIToBinary()
//不知道什麼原因如果後台直接將pdf的數據流發給前台，得到的是亂碼，將數據轉換成 Uint8Array始終不成功
//所以就讓後台將發送之前的數據流做 了base64編碼發給前台，前台再解碼得到的數據就不是亂碼了。
var BASE64_MARKER = ';base64,';

var preFileId = {{mark}};

//viewer.js全局變數,傳入buffer，回答問題2
var DEFAULT_URL

$(document).ready(function(){
$.ajax({
type:"post",
async: false,
//ajax接收pdf數據流，注意dataType值的設置是否有錯，如果不指定，jQuery將自動根據HTTP包MIME信息返回
//responseXML或responseText . 回答問題1
contentType:"application/pdf;charset=utf-8",
url:"{% url netPan.File.views.browserFuf%}",
data:{
id: preFileId
},
success:function(data){
var pdfAsDataUri = data;
//如果引入了viewer.js , 處理方法
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
DEFAULT_URL = pdfAsArray;
// 只引入了pdf.js, 未引入viewer.js， 處理方法
// var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
// PDFJS.getDocument（pdfAsArray).then(); 自己寫pdf的處理函數
}
});
});

function convertDataURIToBinary(dataURI) { //編碼轉換，回答問題3
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;

//轉換成pdf.js能直接解析的Uint8Array類型,見pdf.js-4068
var array = new Uint8Array(new ArrayBuffer(rawLength));

for(i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
</script>

<!--先設置全局變數DEFAULT_URL 的值，所以要後調入viewer.js -->
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/viewer.js"></script>
</head>

<body>
省略內容
</body>
</html>