A. wpsjs瀹忎缭瀛树负pdf
璇烽梾浣犳槸𨱍抽梾钬渨psjs瀹忓备綍淇濆瓨涓簆df钬濊繖涓闂棰桦悧锛焪psjs瀹忎缭瀛树负pdf镄勬搷浣滃备笅锛
宸ュ叿锛氱数鑴戙亀ps杞浠躲
1銆佹墦寮WPS琛ㄦ牸锛岀‘淇濇枃妗d腑钖链夐渶瑕佷缭瀛樼殑瀹忋
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鍐呴儴璋幂敤澶氭★纴闾f剰锻崇潃鎴戜滑鍙浠ュ厛杩涘叆浜涓灭绣椤碉纴澶勭悊阃昏緫钖庯纴鍐嶆¤皟鐢╬age.goto杩欎釜鍑芥暟
娉ㄦ剰锛屼笂闱㈣繖涓鍒囬昏緫锛岄兘鏄痯uppeteer杩欎釜鍖呭府鎴戜滑鍦ㄧ湅涓嶈佺殑鍦版柟寮钖浜嗗彟澶栦竴涓娴忚埚櫒锛岀劧钖庡勭悊阃昏緫锛屾墍浠ユ渶缁堣佽皟鐢╞rowser.close()鏂规硶鍏抽棴闾d釜娴忚埚櫒銆
杩欐椂鍊欐垜浠瀵逛笂涓绡囩殑浠g爜杩涜屼紭鍖栵纴鐖鍙栧瑰簲镄勮祫婧愩
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杩樻槸娌℃湁鍑虹幇 瀵瑰簲镄勫瓧娈碉纴闾d箞璇锋偍閲嶅惎鐢佃剳鍗冲彲
绗浜旀 镓揿紑链椤圭洰鏂囦欢澶癸纴镓揿紑锻戒护琛屽伐鍏凤纸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' })
//阃夋嫨浣犺佽緭鍑虹殑闾d釜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()
})()
鏂囦欢瑙f瀯璁捐
鏁版嵁鍦ㄨ繖涓镞朵唬闱炲父鐝嶈吹锛屾寜镦х绣椤电殑璁捐¢昏緫锛岄夊畾鐗瑰畾镄删ref镄勫湴鍧锛屽彲浠ュ厛鐩存帴銮峰彇瀵瑰簲镄勮祫婧愶纴涔熷彲浠ラ氲繃鍐嶆′娇鐢 page.goto鏂规硶杩涘叆锛屽啀璋幂敤 page.evaluate() 澶勭悊阃昏緫锛屾垨钥呰緭鍑哄瑰簲镄凯DF鏂囦欢锛屽綋铹朵篃鍙浠ヤ竴鍙f皵杈揿嚭澶氢釜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>