SVG ใน jsPDF: เก็บพาธโลโก้ใน PDF ที่สร้างผ่านเบราว์เซอร์

หากต้องการใส่พาธโลโก้ SVG ใน PDF ที่สร้างผ่านเบราว์เซอร์ด้วย jsPDF ให้โหลด svg2pdf.js ส่งองค์ประกอบ SVG ให้ await doc.svg(...) แล้วบันทึกเอกสาร เลือก addSvgAsImage เฉพาะเมื่อยอมรับภาพราสเตอร์ได้ อินพุตเป็น SVG ไม่ได้หมายความว่า PDF ผลลัพธ์จะมีพาธ SVG

ตัวอย่างการใช้ svg2pdf.js อธิบายการเรียกแบบอะซิงโครนัสที่รับองค์ประกอบ การทำงานของโมดูล SVG ใน jsPDF แสดงอีกวิธี: เรนเดอร์ลง canvas เข้ารหัสเป็น JPEG แล้วเพิ่มภาพนั้นใน PDF

สำหรับโลโก้ในใบแจ้งหนี้ ตั๋ว หรือรายงาน ให้เก็บ SVG ต้นฉบับเป็นไฟล์หลักที่แก้ไขได้ คู่มือนี้ทดสอบตราสัญลักษณ์สองสีเรียบง่าย กำหนดตำแหน่งเป็นพอยต์ PDF และตรวจวัตถุที่บันทึก ไม่ได้สมมติว่าฟีเจอร์ SVG ทุกอย่างยังคงอยู่หลังแปลง

เลือกเอาต์พุตที่ต้องการ

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

เมื่อสิ่งส่งมอบเป็นชุดสไลด์ ให้ใช้ คู่มือภาพ SVG ใน PptxGenJS ซึ่งตรวจอัตราส่วนโลโก้ สื่อใน PPTX ที่ส่งออก และรูปลักษณ์ในแอปนำเสนอ แทนการใช้การตั้งค่าส่งออก PDF กับเอกสารอีกชนิด

เริ่มด้วยตัวอย่างเล็กที่ล็อกเวอร์ชัน

ตัวอย่างรันในเบราว์เซอร์ด้วย jsPDF 4.2.1 และ svg2pdf.js 2.8.1 นี่เป็นเวอร์ชันที่ทดสอบ ไม่ใช่คำรับประกันสำหรับรุ่นอนาคต แพ็กเกจชื่อ svg2pdf.js รวมส่วนท้ายด้วย แพ็กเกจชื่อคล้ายกันอาจใช้กับกระบวนการต่างกัน

ในโปรเจกต์เบราว์เซอร์ขนาดเล็กที่ใช้ตัวรวมบันเดิล JavaScript ให้ติดตั้ง:

npm install jspdf@4.2.1 svg2pdf.js@2.8.1

ใช้ตราสัญลักษณ์ที่เราสร้างนี้เป็นอินพุต วงแหวนมีช่องเปิดจริงผ่านกฎเติมสีแบบคู่คี่ พาธที่สองเป็นยอดโค้งมน ไม่มีฟอนต์ ไฟล์ลิงก์ ฟิลเตอร์ หรือภาพราสเตอร์ฝัง

import { jsPDF } from 'jspdf';
import 'svg2pdf.js';
 
const svgText = `<svg xmlns="http://www.w3.org/2000/svg"
  width="240" height="160" viewBox="0 0 240 160">
  <path fill="#174d64" fill-rule="evenodd"
    d="M20 80 C20 15 120 15 120 80 C120 145 20 145 20 80 Z
       M48 80 C48 111 92 111 92 80 C92 49 48 49 48 80 Z"/>
  <path fill="#e66d45"
    d="M130 120 L170 35 Q178 20 188 35 L225 120 Z"/>
</svg>`;
 
async function makeVectorPdf() {
  const svg = new DOMParser()
    .parseFromString(svgText, 'image/svg+xml')
    .documentElement;
  const doc = new jsPDF({
    unit: 'pt',
    format: [300, 220],
    orientation: 'landscape'
  });
  await doc.svg(svg, { x: 30, y: 30, width: 240, height: 160 });
  return doc;
}
 
const doc = await makeVectorPdf();
doc.save('logo-vector.pdf');

รันในเบราว์เซอร์ ไม่ใช่ในสคริปต์ Node.js โดยตรง หมายเหตุการใช้และขอบเขตไลบรารี กำหนดให้มี DOM เบราว์เซอร์ที่ทำงานได้และอธิบายการรองรับ SVG ที่จำกัด ในแอปพลิเคชันที่เรนเดอร์บนเซิร์ฟเวอร์ ให้วางงานนี้ในตัวจัดการส่งออกฝั่งไคลเอนต์

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

กำหนดตำแหน่งแยกจาก viewBox

ในตัวอย่างนี้ unit: 'pt' ทำให้การวัด PDF เป็นพอยต์ หน้ามีขนาด 300 คูณ 220 พอยต์ วิวพอร์ตงานภาพเริ่มห่างจากซ้ายและบน 30 พอยต์ และมีขนาด 240 คูณ 160 พอยต์ เอกสารตัวสร้างอินสแตนซ์ jsPDF อธิบายตัวเลือกหน่วยเอกสาร รูปแบบ และแนวหน้า

viewBox="0 0 240 160" ของ SVG อธิบายพิกัดภายใน ไม่ใช่ขนาดหน้า PDF การรักษาความกว้างและสูงปลายทางในอัตราส่วน 3:2 เดียวกันช่วยให้ตรวจการจัดให้พอดีที่ตั้งใจไว้ได้ง่าย หากต้องการงานภาพที่วางให้เล็กลงครึ่งหนึ่ง ใช้ width: 120, height: 80 พิกัดพาธต้นฉบับคงเดิมได้

กำหนดขนาดชัดเจนและ viewBox ที่เหมาะสมให้ SVG ที่ส่งออกก่อนแก้ตำแหน่งใน PDF ขอบว่างใหญ่ผิดคาดอาจอยู่ในผืนภาพ SVG การย้าย x และ y ย้ายวิวพอร์ต SVG ทั้งหมดรวมพื้นที่ว่างนั้น

ตรวจ PDF ที่บันทึกทั้งสองไฟล์

เพื่อเปรียบเทียบ การรันในเบราว์เซอร์เดียวกันสร้างเวอร์ชันที่จงใจทำเป็นราสเตอร์นี้ด้วย:

const raster = new jsPDF({
  unit: 'pt',
  format: [300, 220],
  orientation: 'landscape'
});
await raster.addSvgAsImage(svgText, 30, 30, 240, 160);
raster.save('logo-raster.pdf');

การทดสอบใช้ canvg 3.0.11 ซึ่งเป็น dependency ที่ติดตั้งกับ jsPDF สำหรับวิธีนั้น PDF ทั้งสองถูกบันทึก เปิดใหม่ และเรนเดอร์ด้วยมาตราส่วนเดียวกัน การตรวจภาพและคำสั่งวาดด้วย PyMuPDF รายงานว่า:

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

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

การซูมเพียงอย่างเดียวไม่ใช่หลักฐานเพียงพอ โปรแกรมดู PDF ทุกตัวลงท้ายด้วยการวาดพิกเซลบนหน้าจอ ตรวจวัตถุใน PDF และเปรียบเทียบรูปลักษณ์ที่บันทึกกับไฟล์หลัก SVG คำสั่งเช่น pdfimages -list logo-raster.pdf จาก Poppler สามารถแสดงรายการภาพฝังได้ รายการภาพว่างเพียงอย่างเดียวไม่พิสูจน์ว่ารูปทรงที่ตั้งใจไว้ส่งออกถูกต้อง เพราะหน้าอาจว่าง ตรวจเนื้อหาวาดและรูปลักษณ์ด้วย

แก้ส่วนของการส่งออกที่มีปัญหา

SVG อาจห่อบิตแมปอยู่แล้ว การส่งไฟล์นั้นผ่านตัวส่งออกที่รองรับเวกเตอร์ไม่ได้ลากพิกเซลเป็นเส้นรอบรูปที่แก้ไขได้ ใช้ คู่มือตรวจราสเตอร์ฝัง ก่อนเปลี่ยนการตั้งค่า PDF

การทดสอบนี้ไม่ครอบคลุมเลย์เอาต์ข้อความ ฟิลเตอร์ ภาพภายนอก หรือ CSS ใด ๆ svg2pdf.js จำกัดขอบเขตไว้ที่บางส่วนของ SVG อย่างชัดเจน สำหรับตัวอักษร ทำตามคำแนะนำตั้งค่าฟอนต์ก่อนแปลง หรือเตรียมเส้นรอบรูปในต้นฉบับออกแบบเมื่อทางเลือกนั้นเหมาะสม เก็บไฟล์หลักที่แก้ข้อความได้หากการเปลี่ยนถ้อยคำในอนาคตสำคัญ

เตรียมต้นฉบับโลโก้ด้วย PerfectVector

หากโลโก้เป็นงานเวกเตอร์สะอาดอยู่แล้ว ให้ใช้ต้นฉบับนั้น หากเหลือเพียง PNG หรือ JPG PerfectVector ช่วยกู้คืนรูปทรงที่แก้ไขได้ก่อนขั้นตอน PDF แปลงโลโก้เป็นเวกเตอร์ แล้วตรวจเส้นรอบรูปภายนอก ช่องเปิดเล็ก และสีที่แยกกันในโปรแกรมแก้ไข SVG คู่มือเตรียมโลโก้ ครอบคลุมการตรวจนี้ละเอียดขึ้น

PerfectVector เตรียมงานราสเตอร์สำหรับกระบวนการนี้ ไม่ได้เพิ่มการรองรับ SVG ให้ jsPDF หรือแก้ฟีเจอร์ที่ตัวส่งออกไม่รองรับ เปรียบเทียบพาธที่กู้คืนกับภาพต้นฉบับ ลดความซับซ้อนหรือวาดรายละเอียดที่จำเป็นใหม่ แล้วตรวจ PDF ซ้ำ เก็บภาพถ่ายเป็นรูปภาพเมื่อการลากพาธจะทิ้งรายละเอียดที่ต้องการ คู่มือแปลงภาพเป็นเวกเตอร์ ที่กว้างขึ้นอธิบายการเลือกต้นฉบับนั้น

คำถามที่พบบ่อย

addSvgAsImage เก็บ SVG เป็นพาธเวกเตอร์หรือไม่? ไม่ การทำงาน jsPDF 4.2.1 ที่ทดสอบเรนเดอร์ SVG ผ่าน canvas และฝัง JPEG ใช้ svg2pdf.js กับ doc.svg เมื่อต้องการแปลงรูปทรงที่รองรับเป็นเนื้อหาวาด PDF

doc.svg รับชื่อไฟล์ SVG หรือไม่? API ที่สาธิตรับองค์ประกอบ DOM ของ SVG โหลดและแยกวิเคราะห์ไฟล์ที่เชื่อถือก่อน หรือเลือกองค์ประกอบ SVG ที่มีอยู่ จากนั้นส่งองค์ประกอบนั้นให้ doc.svg และรอผลลัพธ์

SVG ทุกไฟล์จะดูเหมือนเดิมใน PDF หรือไม่? ไม่ svg2pdf.js รองรับ SVG จำกัดเพียงบางส่วน ทดสอบงานจริงรวมทั้งฟอนต์ ภาพ เอฟเฟกต์ ขนาด และพื้นหลัง แล้วเปิด PDF ที่บันทึกใหม่ก่อนใช้งาน

แหล่งอ้างอิง

1. yWorks — การใช้และขอบเขต svg2pdf.js — API องค์ประกอบ SVG การแปลงอะซิงโครนัส การตั้งค่าฟอนต์ ข้อกำหนดเบราว์เซอร์ และข้อจำกัดขอบเขตที่รองรับ
2. jsPDF — โมดูล SVG เวอร์ชัน 4.2.1 — การทำงาน canvas และ JPEG ที่ addSvgAsImage ใช้
3. jsPDF — เอกสารอ้างอิงตัวสร้างอินสแตนซ์ — หน่วยเอกสาร PDF รูปแบบหน้า และตัวเลือกแนวหน้า
4. PyMuPDF — การตรวจหน้า — วิธีตรวจคำสั่งวาดและภาพที่ใช้ตรวจไฟล์ทดสอบที่บันทึก

มีเพียงโลโก้ราสเตอร์หรือ? เตรียม SVG ที่แก้ไขได้จากโลโก้ของคุณ ตรวจเส้นรอบรูปและช่องเปิด แล้วส่งออกด้วยวิธี PDF ที่เลือกและตรวจวัตถุที่บันทึกกับพื้นหลัง