前端导出PDF的组件及方法实际例子

// 引入jsPDF库
import jsPDF from 'jspdf';

// 创建一个新的PDF文档
const doc = new jsPDF();

// 添加文本到PDF文档
doc.text('Hello, World!', 10, 10);

// 保存PDF文档
doc.save('example.pdf');

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

// 获取要导出的HTML元素
const element = document.getElementById('my-element');

// 使用html2canvas将HTML元素转换为图像
html2canvas(element).then((canvas) => {
  // 创建一个新的PDF文档
  const doc = new jsPDF();

  // 将图像添加到PDF文档中
  const imgData = canvas.toDataURL('image/jpeg');
  doc.addImage(imgData, 'JPEG', 10, 10);

  // 保存PDF文档
  doc.save('example.pdf');
});

// 引入pdfMake库
import pdfMake from 'pdfmake';

// 定义PDF文档的内容和样式
const docDefinition = {
  content: [
    'Hello, World!'
  ]
};

// 生成PDF文档
pdfMake.createPdf(docDefinition).download('example.pdf');

import pdfMake from 'pdfmake';
import html2pdf from 'html2pdf';

// 获取要导出的HTML元素
const element = document.getElementById('my-element');

// 使用html2pdf将HTML元素转换为PDF文档
html2pdf(element).then((pdf) => {
  // 保存PDF文档
  pdf.save('example.pdf');
});

// 引入Print.js库
import Print from 'print-js';

// 定义要打印或导出的内容
const content = 'Hello, World!';

// 打印或导出PDF文档
Print({
  printable: content,
  type: 'pdf',
  documentTitle: 'Example PDF',
  documentStyle: 'margin: 10px;',
}).print();

import Print from 'print-js';
import html2pdf from 'html2pdf';

// 获取要导出的HTML元素
const element = document.getElementById('my-element');

// 使用html2pdf将HTML元素转换为PDF文档
html2pdf(element).then((pdf) => {
  // 打印或导出PDF文档
  Print({
    printable: pdf,
    type: 'pdf',
    documentTitle: 'Example PDF',
    documentStyle: 'margin: 10px;',
  }).print();
});