jsPDF SVG: giữ đường dẫn logo trong PDF từ trình duyệt

Để đưa đường dẫn logo SVG vào PDF tạo bằng jsPDF trong trình duyệt, tải svg2pdf.js, truyền phần tử SVG vào await doc.svg(...), rồi lưu tài liệu. Chỉ chọn addSvgAsImage khi ảnh raster chấp nhận được. Đầu vào SVG của nó không có nghĩa PDF kết quả chứa đường dẫn SVG.

Ví dụ sử dụng svg2pdf.js mô tả lời gọi bất đồng bộ dựa trên phần tử. Mã triển khai mô-đun SVG của jsPDF cho thấy cách còn lại: kết xuất vào canvas, mã hóa JPEG và thêm ảnh đó vào PDF.

Với logo hóa đơn, vé hoặc báo cáo, giữ SVG gốc làm bản chính chỉnh sửa được. Hướng dẫn này thử biểu trưng hai màu đơn giản, đặt vị trí bằng point PDF và kiểm tra các đối tượng đã lưu. Nó không giả định mọi tính năng SVG đều được giữ qua chuyển đổi.

Chọn đầu ra bạn cần

Cách thứ ba hữu ích khi cần PDF logo đã chuẩn bị thay vì tài liệu ghép bằng JavaScript. Với quy trình tài liệu ngoài trình duyệt, hướng dẫn SVG trong LaTeX giải thích quy trình xuất rồi chèn riêng. Với quy trình tài liệu Node, ví dụ SVG PDFKit phân biệt chèn cả tài liệu với phân tích một đường dẫn.

Khi sản phẩm bàn giao là bộ slide, dùng hướng dẫn ảnh SVG PptxGenJS. Nó kiểm tra tỷ lệ logo, nội dung media trong PPTX xuất ra và diện mạo trong ứng dụng trình chiếu, thay vì áp dụng cài đặt xuất PDF cho định dạng tài liệu khác.

Chạy ví dụ nhỏ với phiên bản cố định trước

Ví dụ được chạy trong trình duyệt với jsPDF 4.2.1 và svg2pdf.js 2.8.1. Đây là phiên bản được thử nghiệm, không phải cam kết về bản phát hành tương lai. Gói tên là svg2pdf.js, bao gồm hậu tố; các gói tên tương tự có thể phục vụ quy trình khác.

Trong dự án trình duyệt nhỏ có công cụ đóng gói JavaScript, cài:

npm install jspdf@4.2.1 svg2pdf.js@2.8.1

Dùng biểu trưng tự tạo này làm đầu vào. Vòng của nó có khoảng trống thực nhờ quy tắc tô even-odd. Đường dẫn thứ hai là đỉnh bo tròn. Không có phông chữ, tệp liên kết, bộ lọc hoặc ảnh raster nhúng.

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');

Chạy trong trình duyệt, không trực tiếp trong tập lệnh Node.js. Ghi chú sử dụng và phạm vi thư viện yêu cầu DOM trình duyệt hoạt động và mô tả hỗ trợ SVG có giới hạn. Trong ứng dụng kết xuất phía máy chủ, đặt phần việc này trong trình xử lý xuất ở phía client.

Chuỗi ở đây là hình cố định đáng tin cậy. Nếu ứng dụng nhận SVG tải lên tùy ý, chỉ phân tích XML không phải làm sạch nội dung. Làm theo hướng dẫn thư viện về làm sạch SVG do người dùng cung cấp và cô lập việc thực thi của nó trước khi dựng quy trình tải lên.

Đặt vị trí riêng với viewBox

Trong ví dụ này, unit: 'pt' khiến số đo PDF dùng point. Trang có kích thước 300 × 220 point; khung nhìn của hình bắt đầu cách trái và trên 30 point, chiếm 240 × 160 point. Tài liệu hàm khởi tạo jsPDF mô tả tùy chọn đơn vị tài liệu, định dạng và hướng trang.

viewBox="0 0 240 160" của SVG mô tả tọa độ bên trong. Nó không phải kích thước trang PDF. Giữ chiều rộng và chiều cao đích ở cùng tỷ lệ 3:2 giúp dễ kiểm tra cách khớp dự định. Để giảm nửa kích thước hình được đặt, dùng width: 120, height: 80; tọa độ đường dẫn nguồn có thể giữ nguyên.

Cho SVG xuất ra kích thước rõ ràng và viewBox hợp lý trước khi gỡ lỗi vị trí PDF. Viền trống lớn bất ngờ có thể thuộc khung vẽ SVG. Đổi x và y di chuyển toàn bộ khung nhìn SVG, bao gồm khoảng trống đó.

Kiểm tra cả hai PDF đã lưu

Để so sánh, cùng lần chạy trình duyệt cũng tạo phiên bản chủ động raster hóa này:

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

Phép thử dùng phụ thuộc canvg 3.0.11 được cài cùng jsPDF cho cách đó. Cả hai PDF được lưu, mở lại và hiển thị ở cùng tỷ lệ. Phép kiểm tra hình vẽ và ảnh của PyMuPDF báo cáo:

Luồng nội dung của tệp vector chứa lệnh đường cong và phép tô even-odd cho vòng. Tệp raster đặt đối tượng ảnh. Các số đếm này mô tả mẫu nhỏ này; SVG phức tạp hơn có thể tạo đối tượng khác hoặc có nội dung raster riêng.

Hình chữ nhật đen là kết quả quan sát được của lần xuất raster này, bao gồm cả khoảng trống trước đó trong suốt của vòng. JPEG không giữ độ trong suốt alpha; đừng cho rằng vùng trong suốt của SVG sẽ được giữ qua cách này. Kiểm tra nền bạn thực sự cần, đặc biệt khi logo sẽ nằm trên một vùng màu của tài liệu.

Chỉ phóng lớn là chưa đủ bằng chứng. Cuối cùng mọi trình xem PDF đều vẽ pixel lên màn hình. Kiểm tra các đối tượng PDF và so sánh diện mạo đã lưu với bản SVG gốc. Lệnh như pdfimages -list logo-raster.pdf của Poppler có thể liệt kê ảnh nhúng. Chỉ danh sách ảnh rỗng không chứng minh các hình dự định đã xuất đúng: trang có thể trống. Cũng kiểm tra nội dung vẽ và diện mạo.

Sửa phần bị lỗi trong quá trình xuất

SVG có thể đã bọc bitmap. Truyền tệp đó qua công cụ xuất hỗ trợ vector không đồ lại pixel thành đường bao chỉnh sửa được. Dùng hướng dẫn kiểm tra raster nhúng trước khi đổi cài đặt PDF.

Phép thử này không bao gồm bố cục chữ, bộ lọc, ảnh ngoài hoặc CSS tùy ý. svg2pdf.js giới hạn rõ phạm vi ở một phần tính năng SVG. Với chữ, làm theo hướng dẫn thiết lập phông của nó trước khi chuyển đổi, hoặc chuẩn bị đường bao trong nguồn thiết kế khi đánh đổi đó phù hợp. Giữ bản chính có chữ chỉnh sửa được nếu thay đổi câu chữ về sau quan trọng.

Chuẩn bị nguồn logo bằng PerfectVector

Nếu logo đã là hình vector sạch, dùng nguồn đó. Nếu chỉ còn PNG hoặc JPG, PerfectVector có thể giúp khôi phục hình chỉnh sửa được trước bước PDF. Vector hóa logo, rồi kiểm tra đường bao ngoài, khoảng trống nhỏ và màu riêng trong trình chỉnh sửa SVG. Hướng dẫn chuẩn bị logo trình bày việc kiểm tra đó chi tiết hơn.

PerfectVector chuẩn bị hình raster cho quy trình này; nó không thêm hỗ trợ SVG vào jsPDF hoặc sửa tính năng không được công cụ xuất hỗ trợ. So sánh đường dẫn khôi phục với ảnh gốc, đơn giản hóa hoặc vẽ lại chi tiết cần thiết, rồi chạy lại kiểm tra PDF. Giữ ảnh chụp dạng ảnh khi đồ lại sẽ mất chi tiết bạn cần. Hướng dẫn vector hóa ảnh rộng hơn giải thích lựa chọn nguồn đó.

Câu hỏi thường gặp

addSvgAsImage có giữ SVG dưới dạng đường dẫn vector không? Không. Mã triển khai jsPDF 4.2.1 được thử kết xuất SVG qua canvas và nhúng JPEG. Dùng svg2pdf.js với doc.svg khi cần hình học được hỗ trợ của nó chuyển thành nội dung vẽ PDF.

doc.svg có nhận tên tệp SVG không? API được minh họa nhận phần tử DOM SVG. Tải và phân tích tệp đáng tin cậy trước, hoặc chọn phần tử SVG có sẵn, rồi truyền phần tử đó vào doc.svg và await kết quả.

Mọi SVG có giữ nguyên diện mạo trong PDF không? Không. svg2pdf.js hỗ trợ một phần SVG có giới hạn. Thử hình thực tế của bạn, bao gồm phông chữ, ảnh, hiệu ứng, kích thước và nền, đồng thời mở lại PDF đã lưu trước khi dùng.

Nguồn tham khảo

1. yWorks — sử dụng và phạm vi svg2pdf.js — API phần tử SVG, chuyển đổi bất đồng bộ, thiết lập phông, yêu cầu trình duyệt và giới hạn phạm vi hỗ trợ.
2. jsPDF — mô-đun SVG phiên bản 4.2.1 — Mã triển khai canvas và JPEG dùng bởi addSvgAsImage.
3. jsPDF — tài liệu hàm khởi tạo — Đơn vị tài liệu PDF, định dạng trang và tùy chọn hướng.
4. PyMuPDF — kiểm tra Page — Phương thức kiểm tra hình vẽ và ảnh dùng để xem các tệp thử đã lưu.

Bạn chỉ có logo raster? Chuẩn bị SVG chỉnh sửa được từ logo, kiểm tra đường bao và khoảng trống, rồi xuất bằng cách tạo PDF đã chọn và kiểm tra đối tượng cùng nền đã lưu.