จุลสารออนไลน์ หรือ วารสารออนไลน์ บน pdf.js viewer

ปรับปรุง : 2566-04-27 (ปรับการเรียกใช้)

การเปิดเอกสารออนไลน์บนบราวเซอร์ จุลสารออนไลน์ หรือ วารสารออนไลน์ หรือ เอกสารแบบ PDF อื่น ๆ บน pdf.js viewer คือ ชุดโปรแกรมที่พัฒนาด้วยภาษา Javascript เพื่อแสดงแฟ้มข้อมูลแบบ PDF บนบราวเซอร์ สำหรับกรณีที่บราวเซอร์บนเครื่องคอมพิวเตอร์หรือสมาร์ทโฟนไม่รองรับ หรือต้องการฟังก์ชันเพิ่มเติม พบว่า บทความวิจัย หรือบทความวิชาการที่เผยแพร่ใน ระบบฐานข้อมูลวารสารอิเล็กทรอนิกส์กลางของประเทศไทย ใช้โปรแกรมชุดนี้
PDF.js คือ ชุดโปรแกรมที่พัฒนาด้วยภาษา Javascript เพื่อแสดงแฟ้มข้อมูลแบบ PDF (Portable Document Format) บนบราวเซอร์ สำหรับกรณีที่บราวเซอร์บนเครื่องคอมพิวเตอร์หรือสมาร์ทโฟนไม่รองรับ หรือต้องการฟังก์ชันเพิ่มเติม เช่น เรียงหน้ากระดาษแบบแนวนอนหรือแนวนอน ดูเฉพาะหน้าคู่คี่ เปิดแฟ้มอื่นแทนที่กำลังเปิดอยู่
การนำโค้ดมาใช้ มีให้เลือก Download 3 แบบ ได้แก่ 1) Prebuild ซึ่งมี generic build ที่พร้อมใช้แล้ว ซึ่งจะมีแฟ้ม viewer.html อยู่ในห้อง build 2) Prebuild สำหรับ old browsers 3) Source หรือ zip file ที่เริ่มจากการสั่ง $ git clone https://github.com/mozilla/pdf.js.git แล้ว $ cd pdf.js จากนั้น install ด้วย node.js แล้วสั่ง build generic เพื่อนำโค้ดไปใช้
Gulp คือ เครื่องมือจัดการงาน (Task) โดยอัตโนมัติ เหมือนมีผู้ช่วยมาทำงานสนับสนุนอยู่ตลอดเวลา เช่น การแปลง sass หรือ less เป็น css (Compile) การย่อขนาดภาพ (Minify) รวมแฟ้ม css หรือ js หลายแฟ้มเป็นแฟ้มเดียว (Combile) สั่งเริ่มต้นเว็บบราวเซอต์ใหม่ (Refresh) โดยเริ่มต้นด้วยการสั่งติดตั้ง $ npm install -g gulp แล้วสำรวจแฟ้ม gulpfile.js (2303 บรรทัด) ที่สนับสนุนงานของ pdf.js แล้วอ่านเพิ่ม เขียนโดย Chai Phonbopit

จุลสารเสียงลำปาง ฉบับที่ 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 (CDN1 )
โปสเตอร์ - WTU #20: TOU BA. 002 | TOU BA. 004 | รวม 18 ผลงานในการประชุมครั้งนี้
articles / offices : นำเข้าสินค้าส่งถึงมือผู้บริโภคอย่างรวดเร็ว
Traceroute : ipip_aclalumni | ipip_lampangnet | keycdn_aclalumni | keycdn_weblampang

วิธีการใช้งาน pdf.js มี 4 วิธี

วิธีที่ 1 การสร้าง pdf.js จากรหัสต้นฉบับ
วิธีที่ 2 การนำ prebuild ที่พร้อมใช้ไปลงเครื่อง
วิธีที่ 3 การใช้งาน pdf.js ผ่าน iframe
วิธีที่ 4 การใช้ pdf.js จาก CDN แล้วเขียน JS ควบคุมผลลัพธ์
อ่านเพิ่ม /jslibrary

ต.ย.ประยุกต์ใช้ เพื่อแสดงแฟ้ม pdf บน browser ได้ทันที

การพัฒนาระบบในปัจจุบัน จำเป็นต้องมีเอกสารรายงานผล ซึ่ง output แบบ pdf เป็นที่นิยมอย่างมาก เนื่องจากรูปแบบที่เป็นมาตรฐาน มีแอปพลิเคชันรองรับมากมาย เปิดในอุปกรณ์ใดก็จะได้ผลลัพธ์เหมือนเดิม ซึ่ง การใช้ pdf.js บนเว็บไซต์ จะช่วยให้ viewer สามารถเปิดอ่านบน browser ได้ทันที ไม่ต้องติดตั้งแอปพลิเคชันเพิ่มเติม แล้วยังสามารถเขียนโปรแกรมรับคำสั่งงานอย่างอื่น ที่มาพร้อมเอกสาร ได้อย่างต่อเนื่องไม่สะดุด เช่น 1) ปิดงาน 2) ตรวจสอบ 3) ติดตามงาน 4) ส่ง 5) ตีกลับ 6)สั่งโอน 7) แนบแฟ้มเพิ่มเติม 8) ลงนามเอกสาร 9) ส่งต่อลิงค์ไปกับอีเมล ต่างกับ การแชร์แฟ้มบน email , line หรือ facebook ที่ผู้เปิดแฟ้ม จำเป็นต้องทำใน 2 ขั้นตอน คือ 1) ดาวน์โหลดแฟ้ม 2) หาโปรแกรมที่สามารถเปิดแฟ้ม pdf ขึ้นมาอ่าน แต่ถ้าผู้พัฒนาระบบเว็บไซต์ ติดตั้ง pdf.js ในระบบ จะทำให้ผู้เปิดอ่านเอกสารแบบ pdf ที่อยู่ในระบบ สามารถเปิดอ่านได้ทันทีบน browser โดยไม่ต้อง ดาวน์โหลด หรือเลือกโปรแกรมมาเปิดแฟ้มเอกสาร

การสร้าง pdf.js จากรหัสต้นฉบับ

เมื่อวันที่ 11 มิ.ย.64 พบว่า บริการฐานข้อมูลวารสารของ ThaiJO ที่จัดอันดับวารสารของไทย ซึ่งบริการบทความในวารสารให้เปิดอ่านได้ง่าย โดยใช้ pdf.js รุ่น 2.0.943 ที่มีฟังก์ชันทำให้อ่านบทความได้ดีกว่า เมื่อเปรียบเทียบกับการอ่านบนบราวเซอร์ (Browser) เช่น Chrome, Firefox, Edge, IE หรือ Opera และจากการติดตามโค้ดใน viewer.html หรือ iframe ซึ่งรุ่นล่าสุดของ pdf.js คือ 2.9.359 (30 พ.ค.64) # # # # # # # #
การติดตั้ง pdf.js ผ่าน node.js แล้วสั่ง gulp generic
$ git clone https://github.com/mozilla/pdf.js.git

สั่งดาวน์โหลด script ทั้งหมดใน repository จาก github.com
มาไว้ในเครื่องคอมพิวเตอร์ของเรา บน current directory
ระยะเวลาในการ download ขึ้นอยู่ขนาดของ repository และความเร็วในการเชื่อมต่อ
ซึ่งยังนำ package นี้ไปใช้ในทันทีไม่ได้ ต้องมีขั้นตอนต่อไป
หลัง clone ทำให้ห้อง pdf.js มีขนาดรวมถึง 203 MB, 1626 Files, 194 Folders

$ cd pdf.js

หลังดาวน์โหลดจะสร้าง folder ต้องใช้คำสั่ง change directory เข้าไปอยู่ใน folder
แล้วจะสามารถสั่งดำเนินการอย่างอื่นต่อได้โดยสะดวก

$ npm install -g gulp-cli

ใช้โปรแกรม node package manager ติดตั้งแพคเกจ gulp-cli (CLI = Command Line)
ซึ่ง -g หรือ --global หมายถึง การติดตั้ง current package ให้เป็น global package ที่ project อื่นเรียกใช้ได้
ทำให้เรียกใช้คำสั่ง gulp -v (รุ่น 2.3.0) ใน folder ใดก็สามารถทำงานได้ ไม่ต้องติดตั้งซ้ำ
-g คือ ติดตั้งนอก project ทำให้เรียกใช้ได้ทั่วไป พบแฟ้มทั้งหมดใน dir %AppData%\npm\node_modules
ไม่มี -g คือ ติดตั้งใน project ทำให้มีแฟ้ม 919 MB, 35159 Files, 6009 Folders รวมกับ pdf.js
ติดตั้งเฉพาะ gulp-cli ใน blank folder ทำให้มีแฟ้ม 7.77 MB, 2644 Files, 708 Folders
สั่งถอนการติดตั้งด้วย npm uninstall -g gulp-cli จะมีผลให้ project อื่นเรียก gulp ใช้ไม่ได้
อ่านเพิ่ม https://css-tricks.com/gulp-for-beginners/

$ npm install

หน้าที่หลักของ npm
- สร้าง package.json เพื่อเริ่มต้นทำ project บน node
- ดาวน์โหลด ติดตั้ง หรือถอน module หรือ library หรือ package ลงเครื่อง หรือลงในโปรเจค
- อัพเดท module
หลัง install ทำให้มีแฟ้ม 1.13 GB, 38934 Files, 6644 Folders

$ gulp server

เปิด http://localhost:8888/web/viewer.html
โปรแกรม gulp เข้าถึงแฟ้ม gulpfile.js ที่อยู่ใน root directory ของ project
มองหา task ชื่อ server (line 1837 - 1862) และดำเนินการตามนั้น
ถ้าสนใจสร้าง task ใช้เอง อ่านเพิ่มที่ https://devahoy.com/blog/2015/04/getting-started-with-gulp/

$ gulp generic

กระบวนการสร้าง production ให้นำแฟ้มที่ได้จากการสร้าง ไปใช้ในเว็บไซต์
ผลการสร้างจะได้แฟ้มใน folder ชื่อ /build/generic
ผู้พัฒนาสามารถ upload แฟ้มใน /pdf.js/build/generic/* ขึ้นไปยัง remote server ได้
มองหา task ชื่อ generic (line 846 - 866) และดำเนินการตามนั้น

# Node.js - https://www.thaiall.com/reactnative/

การนำ prebuild ที่พร้อมใช้ไปลงเครื่อง โดยไม่ต้อง build เอง อ่านจาก pdfjs.express เรื่อง การติดตั้ง การเขียนโค้ดเพื่อเรียกใช้งาน pdf.js พบว่ามีชุด code ที่พร้อมสำหรับคัดลอกมาใช้ใน server ของเรา มีบริการให้ download ที่ github.io ซึ่งใน ชุดแฟ้มที่ถูกสร้างให้พร้อมใช้นั้น [prebuilt].zip จะมี 2 folder
1. ห้อง /build มีแฟ้ม .js และ .map
2. ห้อง /web มีแฟ้ม viewer.html และ .css
สำหรับนำไปใช้งานในโฮมเพจของเรา

การใช้งาน pdf.js จาก CDN การเรียกใช้ pdf.js จาก CDN มีแนะนำ 2 วิธี ดังนี้ วิธีแรก คือ ใช้ iframe เรียกใช้ viewer.html โดยตรง วิธีที่สอง คือ การอ้างอิงใช้ pdf.worker.js จาก cdn แล้วเขียน javascript ควบคุมผลลัพธ์ ซึ่งทั้ง 2 วิธีมีตัวอย่างที่ cdn1.htm แล้วหาอ่านเพิ่มเติมจาก Web guides ด้านล่างได้ สำหรับแบบเรียก iframe มีตัวอย่างดังนี้

ตัวอย่างแฟ้มที่ใช้งานได้
http://mozilla.github.io/pdf.js/web/viewer.html
http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf

Web guides
"https://cdnjs.com/libraries/pdf.js/2.7.570"
"https://mozilla.github.io/pdf.js/getting_started/"
"https://github.com/mozilla/pdf.js"
"https://www.javascripting.com/view/pdf-js"
"https://github.com/wojtekmaj/react-pdf/issues/378"
"https://stackoverflow.com/questions/59549655/pdf-js-not-loading-pdf-file"

ประสบการณ์พบ error ขณะโหลดแฟ้ม บนระบบที่ใช้ pdf.js เป็นตัว viewer

โปรแกรม pdf.js ได้รับความนิยมในการเปิดแฟ้ม PDF ที่เก็บในเครื่องบริการของตน ทำให้ผู้ใช้สามารถเปิดได้ง่ายทั้งบน desktop และ mobile พบว่ามีการใช้งานในระบบ Thaijo หรือที่ 4shared ได้แบ่งปันหนังสือ Webmaster เมื่อกด "ดูเอกสาร" เข้า preview mode พบว่า เรียกใช้ pdf.js เมื่อเข้าดูแฟ้ม build/pdf.js พบเลขรุ่น PDFJS.version = '0.8.1210'; ส่วนรุ่นปัจจุบันที่ผมใช้คือ pdfjsVersion = '2.10.99'; ส่วนระบบเอกสารอิเล็กทรอนิกซ์ (Electronic Document) หลายค่ายก็ใช้โปรแกรมนี้ แล้วอยู่มาวันหนึ่ง พบปัญหาการเรียกใช้ viewer ขณะโหลดเอกสารมาแสดง พบกับข้อความว่า "file origin does not match viewer's" เมื่อค้นจาก google พบคำแนะนำที่ github.com และ programmersought.com สำหรับกรณีของผม พบว่า การเรียกใช้ url ผิดพลาด ซึ่ง url ควรเป็น doc.thai.com แต่ไปเรียกใช้ด้วย www.doc.thai.com โดยระบบไม่แจ้งปัญหาตั้งแต่ตอนต้น แต่กลับปล่อยให้เข้าใช้งานได้ จนไปพบปัญหาในการ Load แฟ้ม pdf บนโปรแกรม pdf.js สรุปว่าลบ www ออกจาก url ก็ใช้จะงานได้ปกติ

เพื่อน 2 คน ดาวน์โหลดบทความจาก thaijo ไม่ได้ จากการตรวจสอบปัญหา เริ่มจากเข้าไปดู 2 บทความ พบปัญหาคล้ายกัน คือ ระบบในการขอความยินยอม (Consent form) เพื่ออนุญาตการใช้ข้อมูล Cookies ที่สอดรับกับ พระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 ได้มาบดบังแถบเครื่องมือจัดการแฟ้ม pdf จนไม่สามารถใช้ คุณสมบัติที่เตรียมไว้ได้ เช่น ปุ่ม download ได้ถูกบดบังด้วยแบบฟอร์มขอความยินยอม
พบวิธีแก้ไข เพื่อให้สามารถดาวน์โหลดแฟ้ม pdf คือ คลิ๊ปปุ่ม Got it เพื่อยอมรับการใช้ Cookies ที่หน้าบทความวิจัย แล้วคลิ๊ปปุ่ม PDF เพื่อเข้าหน้า Preview ก็จะมีปุ่ม Download มาให้คลิ๊กได้ตามปกติ จากการทดสอบเมื่อ 18 พฤษภาคม 2565 พบปัญหาเรื่อง Consent form และการแก้ไข ด้วยการคลิ๊ปปุ่ม Got it ในเว็บเพจที่ถูกต้อง เพราะถ้าพยายามคลิ๊กปุ่ม Got it ที่หน้า Preview จะยังพบปัญหาเช่นเดิม
รูปแบบการจัดการองค์กรโดยใช้สารสนเทศผ่านการจัดการความรู้
การพัฒนาผลิตภัณฑ์ผ้าม่อห้อม กลุ่มม่อห้อมโบราณย้อมมือบ้านบ่อแฮ้ว ตําบลบ่อแฮ้ว อําเภอเมือง จังหวัดลําปาง

ปุ่มดาวน์โหลดหายไป เมื่อเปิดแฟ้ม pdf ที่เปิดด้วย pdf.js

มีเพื่อน บอกว่าปุ่ม Download แฟ้ม pdf บทความวิชาการไม่ปรากฎ เหมือนกับถูกซ่อนเอาไว้ พบว่า ปุ่มนี้สามารถใช้งานได้ เพียงแต่ถูกซ่อนไม่ให้คลิ๊ก หรือปรากฎออกมาและพร้อมทำงาน การจะให้ปรากฎปุ่ม download ก็เพียงแต่กดปุ่ม F12 แล้วกด Ctrl+Shift+C = Select an element in the page to inspect it แล้วใช้ mouse ชี้ไปที่มุมบนขวา ซึ่งเป็นที่ตั้งของแถบเครื่องมือสำคัญ จากนั้นตำแหน่งในหน้าต่าง element จะเปลี่ยนไปตามการคลิ๊กเลือกของ Mouse ต้องเข้าไปดู code ในรายละเอียด ค้นจนพบคำว่า id="download" จากนั้นก็หาคำว่า hidden แล้วลบออก แต่ถ้าต้องการซ่อนปุ่มนี้ก็พิมพ์คำสั่ง hidden เพิ่มไปใน class

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com

Truehits.net