HTML แปลงเป็นบทสรุปของกรณี PDF (คำแนะนำหลายภาพ)

เนื่องจากความจำเป็นในการทำงานฉันเพิ่งศึกษาฟังก์ชั่นของการแปลง HTML เป็น PDF เทคโนโลยีสำคัญของ HTML ถึง PDF คือวิธีจัดการกับสไตล์ CSS ที่ซับซ้อนในหน้าเว็บ

โหมดไคลเอนต์ : เรียกโปรแกรมไคลเอนต์ในแผนกต้อนรับและใช้ฟังก์ชั่นของโปรแกรมไคลเอนต์เพื่อทำการแปลงไฟล์ PDF ให้เสร็จสิ้น เครื่องมือทดสอบนี้คือ: wkhtmltopdf และ phantomjs Java Jar Package Package Solution Analysis การวิเคราะห์: Java Code Analysis รูปแบบ CSS, ไฟล์การแปล HTML เป็นไฟล์ PDF หมวดการทดสอบนี้คือ: ITEXT, Flying Sauser, PD4ML โหมดการวิเคราะห์ JS Front -end: JS Front -END การวิเคราะห์ไฟล์ HTML คือไฟล์ PDF

สำหรับโซลูชันที่แนะนำบนอินเทอร์เน็ตในครั้งนี้รวมความต้องการของโครงการจริงทำทีละรายการเพื่อทำการวิเคราะห์ต่อไปนี้ในแง่ของประสิทธิภาพและฟังก์ชั่น

1. บทนำหน้าทดสอบบทนำ

โดยการดูการแนะนำของแต่ละกรณีการแปลงบนอินเทอร์เน็ตสไตล์ HTML แบบง่ายสไตล์ตารางทั่วไปได้รับการสนับสนุนโดยแผนการด้านบนเมื่อทำการแปลงไฟล์ PDF อย่างไรก็ตามเมื่อพิจารณาถึงความต้องการของธุรกิจจริงการทดสอบนี้ใช้สไตล์ CSS ของ bootstrap เป็นพิเศษ (v 3.3.6) และหน้ายังใช้คุณสมบัติใหม่ของ CSS3 จากคุณสมบัติใหม่นี้เขียนหน้า HTML แบบคงที่

2. การทดสอบ wkhtmltopdf

WKHTMLTOPDF เป็นเครื่องมือที่พัฒนาขึ้นโดยใช้เอ็นจิ้นเว็บเพจ WebKit เพื่อแปลง HTML เป็น PDF ซึ่งสามารถรวมเข้ากับภาษาสคริปต์หลายภาษาเพื่อแปลงเอกสาร ที่อยู่เว็บไซต์อย่างเป็นทางการ http://wkhtmltopdf.org/

คุณสมบัติทางเทคนิค: WKHTMLTOPDF สามารถแปลงเว็บเพจได้โดยตรงในเบราว์เซอร์เป็น PDF เมื่อใช้รหัส Java คุณสามารถโทรหาคำสั่ง CMD เพื่อให้ฟังก์ชั่นของหน้าเว็บเป็น PDF ให้เสร็จสมบูรณ์

การทดสอบฟังก์ชั่น: ป้อนคำสั่งทดสอบโดยตรงใน CMD เพื่อดูความคืบหน้าการประมวลผล

พารามิเตอร์แรก: เส้นทางที่ wkhtmltopdf.exe ตั้งอยู่

พารามิเตอร์ที่สอง: ต้องแปลงเป็นหน้า HTML ของ PDF

พารามิเตอร์ที่สาม: พา ธ ไฟล์ PDF และชื่อไฟล์

เอฟเฟกต์การส่งออกของหน้ามีดังนี้:

คำอธิบายทดสอบ:

พบว่า WKHTMLTOPDF มีการสนับสนุนที่ดีกว่าสำหรับสไตล์ CSS ของ BootStap โดยรวม คุณสมบัติใหม่ของ CSS3 นั้นไม่ได้รับการสนับสนุนอย่างดีสำหรับรูปภาพกลม บางรูปแบบหน้าจะล้มเหลว สำหรับการแสดงแผนภูมิโปรแกรมการส่งออกของแต่ละชาร์ตจะรายงานข้อผิดพลาดและไม่รองรับ อย่างไรก็ตาม ECHART มีแผนภูมิที่แปลงเป็นอินเทอร์เฟซรูปภาพซึ่งสามารถส่งออกไปยัง PDF ได้โดยได้รับที่อยู่รูปภาพ

3. การทดสอบ phantomjs

Phantomjs เป็นเบราว์เซอร์ที่ไม่มีส่วนร่วมตามเคอร์เนล webkit นั่นคือไม่มีอินเทอร์เฟซ UI นั่นคือมันเป็นเบราว์เซอร์ แต่เป็นการคลิกผ่านหน้าการหมุน ฯลฯ สำหรับการดำเนินการที่เกี่ยวข้องกับการออกแบบขั้นตอน มันมีอินเทอร์เฟซ JavaScript API นั่นคือโดยการเขียนโปรแกรม JS คุณสามารถโต้ตอบกับเคอร์เนล WebKit ได้โดยตรง C/C ++ สามารถพัฒนาได้ดีขึ้นตามการพัฒนา WebKit นอกจากนี้ยังมีการติดตั้งและใช้แพ็คเกจการติดตั้งระบบปฏิบัติการที่แตกต่างกันเช่น Windows, Linux, Mac นั่นคือสามารถพัฒนาและรวบรวมโครงการหรือการทดสอบโครงการอัตโนมัติบนแพลตฟอร์มที่แตกต่างกัน ที่อยู่เว็บไซต์อย่างเป็นทางการ http://phantomjs.org/

phantomjs สามารถใช้เป็นการวิเคราะห์เว็บเพจ การทดสอบใน CMD มีดังนี้:

หน้าทดสอบได้รับคำแนะนำดังนี้:

คำอธิบายทดสอบ:

พบว่า Phantomjs รองรับสไตล์ของ BootStap คุณสมบัติใหม่ของ CSS3 นั้นไม่ได้รับการสนับสนุนอย่างดีสำหรับรูปภาพกลม บางรูปแบบหน้าจะล้มเหลว สำหรับการแสดงแผนภูมิ ECHART สามารถส่งออกได้โดยตรง เอฟเฟกต์มีดังนี้:

3. (ไอโซเซอร์บินและบินได้

ITEXT ใช้ HTML2PDF ความเร็วเร็วความสามารถในการแก้ไขข้อผิดพลาดที่ไม่ดีและสนับสนุนภาษาจีน (ต้องการให้ HTML ใช้การเข้ารหัส Unicode) แต่จีนสนับสนุนแบบอักษรจีนโอเพ่นซอร์ส Flying Sauser ใช้ HTML2PDF ความสามารถในการแก้ไขข้อผิดพลาดที่ไม่ดีรองรับฟอนต์จีนที่หลากหลาย (ไม่สามารถจดจำรูปแบบบางอย่างได้) โอเพ่นซอร์ส

คุณสมบัติทางเทคนิค: การวิเคราะห์และการประมวลผลสไตล์ HTML CSS ตามการเขียนโปรแกรม Java ปัจจุบันรองรับหน้าและสไตล์ที่ง่ายกว่าเท่านั้น สำหรับรูปแบบของ CSS3 และความเข้ากันได้สไตล์ CSS ที่ซับซ้อน CSS3 นั้นแย่มาก เมื่อเนื้อหาหน้ายาวเวลาในการประมวลผลจะช้า ที่อยู่อ้างอิง: https://code.google.com/archive/p/flying-saucer/

ผลการทดสอบ: หน้าทดสอบของการทดลองนี้ไม่สามารถออกมาได้

คำอธิบายทดสอบ:

พบว่าโครงการโอเพ่นซอร์สทั้งสองของ ITEXT และ Flying Sauser นั้นไม่สามารถใช้งานได้กับ CSS3 สำหรับตารางอย่างง่ายการส่งออกข้อมูลทางสถิติและเทคโนโลยีที่อัปเดตรวมถึงตาราง bootstrap, การส่งออกตาราง EasyUI DataGrid ไม่แนะนำให้ใช้รูปแบบนี้ออนไลน์

4.PD4ml ทดสอบ

PD4ML เป็นไลบรารีคลาสของ Java บริสุทธิ์ เว็บไซต์อ้างอิง: http://www.pd4ml.com

ข้อดีของซอฟต์แวร์คือ:

แอตทริบิวต์ HTML ที่รองรับและแอตทริบิวต์ CSS ค่อนข้างเต็มและการบิดเบือนการแปลงนั้นค่อนข้างเล็ก ความทนทานต่อความผิดพลาดของแท็กไฟล์เว็บและข้อผิดพลาดไวยากรณ์ CSS นั้นดีกว่า หากไม่มีการควบคุมเพิ่มเติมรองรับเอาต์พุตการแปลงของรูปภาพ

ข้อเสียของซอฟต์แวร์คือ:

หากไม่มีโอเพ่นซอร์สเวอร์ชันตัวอย่างล่าสุดหลังจากดาวน์โหลดและทดสอบพบว่าไม่รองรับการแปลงภาษาจีน คุณต้องซื้อเวอร์ชันเชิงพาณิชย์ (นี่คือหลุมมากการทดสอบปัญหาที่อ่านไม่ออกไม่สามารถใช้ได้และพบว่าไม่ได้รับการสนับสนุนในภายหลัง) รุ่นเก่าบางรุ่นหลังจากการแตกร้าวสามารถแก้ปัญหาที่อ่านไม่ออกได้ แต่สไตล์ CSS ที่รองรับยังไม่สมบูรณ์

ผลการทดสอบ:

คำอธิบายทดสอบ:

เวอร์ชันใหม่ของภาษาจีนที่อ่านไม่ออก แต่รองรับสไตล์ CSS บางอย่าง หลังจาก decipline ของรุ่นเก่าความเข้ากันได้ของสไตล์ของอินเทอร์เฟซไม่ดีและการสนับสนุนสำหรับ bootsrtap นั้นต่ำ เมื่อพิจารณาว่าเป็นซอฟต์แวร์การชาร์จและประสิทธิภาพไม่สมบูรณ์แบบ

5. การทดสอบ html2canvas

HTML2CANVAS เป็นไลบรารีคลาส JavaScript ที่ค่อนข้างดี HTML2CANVAS ใช้ข้อมูลสไตล์ DOM และองค์ประกอบของหน้าและแสดงผลเป็นภาพผืนผ้าใบเพื่อให้ได้ฟังก์ชั่นของภาพหน้าจอหน้า ไม่จำเป็นต้องมีการเรนเดอร์ใด ๆ จากเซิร์ฟเวอร์ เมื่อเบราว์เซอร์ไม่รองรับผ้าใบ Flashcanvas หรือ ExplorerCanvas จะถูกใช้แทน เบราว์เซอร์ต่อไปนี้สามารถรองรับสคริปต์ได้อย่างดี: Firefox 3.5+, Google Chrome, เวอร์ชันใหม่ของ Opera, IE9 เหนือเบราว์เซอร์ เนื่องจากเบราว์เซอร์แต่ละตัวแสดงหน้าวิธีที่แตกต่างกันรูปภาพที่สร้างขึ้นจึงไม่เหมือนกัน แม้ว่ามันจะยังอยู่ในขั้นตอนการพัฒนา แต่ก็ยังคงน่าสนใจ ปลั๊กนี้ขึ้นอยู่กับปลั๊ก jQuery -ขอแนะนำให้ใช้เวอร์ชันล่าสุด

อย่ารองรับรูปภาพข้ามโดเมนและไม่สามารถใช้ส่วนหนึ่งของปลั๊กเบราว์เซอร์ -โดยไม่รองรับรูปภาพ SVG ไม่รองรับแฟลชไม่รองรับ ifream (สามารถปรับเปลี่ยนรหัสต้นฉบับของ JS สนับสนุน ifream)

เมื่อใช้ HTML2CANVAS ในเวลานี้ฉันพบว่าหน้าหลายรายการสามารถถ่ายภาพหน้าจอได้ตามปกติรวมถึงแผนภูมิ echart ไม่รองรับคุณสมบัติใหม่ของ CSS3 จำนวนเล็กน้อยเท่านั้น เอฟเฟกต์ภาพหน้าจอดีกว่า อย่างไรก็ตามเมื่อทำการทดสอบพบปัญหาร้ายแรง หลังจากการวิเคราะห์การติดตามพบว่าฟังก์ชั่น JS ของ HTML2CANVAS เพื่อจัดการกับสไตล์ CSS ที่ไม่สามารถจดจำได้ โดยเฉพาะอย่างยิ่งสำหรับโมดูลที่ซ่อนอยู่และแสดงมันรองรับไม่เป็นมิตร

ผลของภาพหน้าจอหน้ามีดังนี้:

อย่างไรก็ตาม CSS ของหน้าดั้งเดิมล้มเหลวหน้าจะปรากฏผิดปกติสไตล์ที่ซ่อนอยู่การแสดงผลสไตล์ที่แสดงนั้นวุ่นวาย

คำอธิบายทดสอบ:

พบว่า html2canvas รองรับสไตล์ของ bootstap ดีกว่า คุณสมบัติใหม่ของ CSS3 นั้นไม่ได้รับการสนับสนุนอย่างดีสำหรับรูปภาพกลม ข้อได้เปรียบหลักคือส่วนหน้าเบา ๆ

6. สรุป

ผ่านการทดสอบกรณีข้างต้นการแปลง HTML ที่ใช้กันทั่วไปส่วนใหญ่เป็น PDF ที่แนะนำออนไลน์ โดยการวิเคราะห์หลักการของวิธีการเหล่านี้ข้อสรุปต่อไปนี้สามารถรับได้:

หน้าเว็บ HTML จะถูกแปลงเป็น PDF อย่างสมบูรณ์และโซลูชันทั้งหมดไม่เพียงพอ หากเป็นเพียงหน้าแบบฟอร์มรูปแบบ HTML ไม่ได้ใช้แอตทริบิวต์ของ CSS3 ให้มากที่สุดเท่าที่จะทำได้ สไตล์ HTML Front -END กำลังพัฒนาอย่างรวดเร็วคุณสมบัติใหม่ของ CSS3 มีเอฟเฟกต์ที่ดี CSS กำหนดกฎและไวยากรณ์ใหม่ คลาสการแปลง Java เช่น ITEXT และ Flying Sauser ไม่สามารถเข้ากันได้กับการเปลี่ยนแปลงเหล่านี้เลยเพราะพวกเขาไม่สามารถเขียนฟังก์ชั่นการแปลงได้ทันเวลาและโครงการโอเพ่นซอร์สเหล่านี้เป็นเทคโนโลยีที่เก่ากว่า สาระสำคัญของ PD4ML ยังเป็นรูปแบบของการประมวลผล Java CSS แต่มันก็ไม่รองรับรูปแบบ CSS จำนวนเล็กน้อย และปัญหาที่อ่านไม่ออกของจีนไม่สะดวก สำหรับโหมดเคอร์เนลเบราว์เซอร์ไคลเอนต์ PhantomJs และ WKHTMLTOPDF นั้นมีประสิทธิภาพมากขึ้น โหมดภาพหน้าจอของ HTML2CANVAS นั้นมีความยืดหยุ่นและเป็นเครื่องมือภาพหน้าจอด้านหน้าที่มีน้ำหนักเบา ในปัจจุบันฟังก์ชั่นบางอย่างไม่สมบูรณ์ แต่เอฟเฟกต์โดยรวมไม่เลวร้าย ภาพหน้าจอกับ PDF

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้