纯前端实现导出pdf文件（服务端不到场）
大抵查阅了现阶段利用较多的几种方案,，大概有以下几种方式：一、原生window.print()方法导出pdf
二、jspdf
三、jspdf + html2canvas
四、pdfmake
方案长处缺点window.print()1、兼容性最好
2、可以将任意内容导出成 pdf 文档, 甚至黑白改页面上的内容1、调用方法时部分条件下导出pdf需要用户手动选择
jspdf 1. 调用方法创建 pdf 文件,对于简单的内容可直接利用，
2. 也可以将 dom 节点转换为 pdf
3、生成内容为文本可复制
1、对中文不友好，会有乱码，需要引入字体库办理乱码题目
2、天职dom内容转pdf效果较差, 丢失大量样式设置
3、假如想要导出的pdf文件中包含图片，视觉效果略微含糊
4、pdf分页不利益理
jspdf + html2canvas
1、在jspdf上将生成效果不佳的部分可以转成图片，实用于对样式有要求的场景
2、将乱码部分转为了图片，办理了中文乱码题目
3、没有预览点击即可生存 1、假如内容包含echart图表或者别的图表，该内容需要转图片
2、生成的pdf实际为图片，不支持复制
3、不同浏览器生成可能会有略微差异（页面周边留白部分差异）
4、由于整体效果为图片，导致pdf文件较大（两页2.5MB左右）
5、pdf分页不利益理
pdfmake1、分页利益理1、js对象定义文档内容，对数据布局有固定要求
2、图表依旧需要转图片
以上方式可有利弊，利用还需根据需求及pdf文件的复杂水平去综合思量
方案一：原生window.print()
推荐两篇博主的文章即可了解到该方法的详细利用
1、聊一聊浏览器打印 - window.print
2、前端实现网页打印详解
个人测试效果如下
由于是后台管理体系，导出不想包含左侧菜单栏和顶部区域，以是只对company-detail类名div中的内容举行导出，做了一个暂时导出按钮
https://img-blog.csdnimg.cn/direct/d0dc401e6fe3497b9d8971bcd3c5e5e0.png
假设该页面为想要导出的页面
https://img-blog.csdnimg.cn/direct/63df863fe2a241fb9a3a4eaf57a665e5.png
点击打印如下
https://img-blog.csdnimg.cn/direct/5feb02d09e9145f59d9e1cbe41f81fde.png
注：由于测试，代码中并没有去做样式处置惩罚，可以看到效果还不错，加上样式基本可以还原原来的页面，假如是项目需求更多的是文本，表格信息想导出，同时又能担当需要用户手动选择导出为pdf时，这个方案总体最好
方案二：jspdf
[*] sPDF： 用于在浏览器中生成PDF文件。你可以在Vue项目中利用它，通过引入jsPDF库并编写相应的代码来生成PDF。
[*] npm install jspdf import jsPDF from 'jspdf';
// 创建一个PDF实例
const pdf = new jsPDF();
// 添加内容
pdf.text('Hello world!', 10, 10);
// 保存为PDF文件
pdf.save('example.pdf');
[*] html2pdf： 这个库可以将HTML内容转换为PDF。它支持更复杂的页面布局和样式。
npm install html2pdf.js import html2pdf from 'html2pdf.js';
// 获取要转换为PDF的DOM元素
const element = document.getElementById('content');
// 转换为PDF
html2pdf(element);
在vue中基础利用
<template>
<div>
<button @click="generatePDF">Generate PDF</button>
</div>
</template>
<script>
import jsPDF from 'jspdf';
export default {
methods: {
generatePDF() {
// 创建一个PDF实例
const pdf = new jsPDF();
// 添加内容
pdf.text('Hello world!', 10, 10);
// 添加图像
pdf.addImage('path/to/image.jpg', 'JPEG', 10, 10, 50, 50);
// 添加矩形
pdf.rect(10, 10, 50, 30);
// 添加圆形
pdf.circle(80, 25, 20);
// 添加文本和链接
pdf.textWithLink('Click me', 10, 10, { url: 'https://example.com' });
// 保存为PDF文件
pdf.save('example.pdf');
},
},
};
</script> 还可以配合添加表格
利用autoTable插件可以方便地添加表格。这个插件需要额外安装
npm install jspdf-autotable
import 'jspdf-autotable';
// 添加表格
const columns = ['Name', 'Email', 'Phone'];
const data = [
['John Doe', 'john@example.com', '555-1234'],
['Jane Doe', 'jane@example.com', '555-5678'],
];
pdf.autoTable(columns, data, { startY: 70 });
还可以配合echart添加图表，本质是把echart图表转了图片
<template>
<div>
<canvas ref="chartCanvas"></canvas>
<button @click="generatePDF">Generate PDF with Chart</button>
</div>
</template>
<script>
import Chart from 'chart.js';
import jsPDF from 'jspdf';
export default {
data() {
return {
chartData: {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [
{
label: 'Sample Data',
data: ,
backgroundColor: ['red', 'blue', 'green'],
},
],
},
};
},
mounted() {
// 使用Chart.js创建柱状图
const ctx = this.$refs.chartCanvas.getContext('2d');
new Chart(ctx, {
type: 'bar',
data: this.chartData,
});
},
methods: {
generatePDF() {
// 获取图表的Base64编码
const chartImage = this.$refs.chartCanvas.toDataURL('image/png');
// 创建一个PDF实例
const pdf = new jsPDF();
// 添加图像
pdf.addImage(chartImage, 'PNG', 10, 10, 80, 50);
// 保存为PDF文件
pdf.save('example_with_chart.pdf');
},
},
};
</script>
方案三：jspdf + html2canvas
利用大抵与jspdf相似，不外多叙述
推荐一份好文推荐：（html2canvas 和 jsPDF）；
还有一篇提到分页比力详细的文章：JSPDF + html2canvas A4分页截断
方案四：pdfmake
推荐文章：pdfmark生成pdf文件并下载
巧用pdfmake
[*] pdfmake 是一个用于在浏览器中生成PDF文档的JavaScript库。它答应你利用简单的JavaScript对象来定义文档的布局和内容，而不是直接利用HTML或其他标志语言。这样可以更轻松地生成复杂的、自定义的PDF文档。
以下是 pdfmake 的一些关键特点和概念：
[*] 声明式文档定义： pdfmake 利用声明式的方式定义PDF文档的布局和内容。你通过JavaScript对象来形貌文档的各个部分，如页眉、页脚、段落、表格等。
[*] 支持丰富的样式： 你可以为文本、段落、表格等元素指定各种样式，包括字体、颜色、大小、对齐方式等。这使得你可以或许创建具有良好格式和外观的PDF文档。
[*] 支持表格： pdfmake 提供了强大的表格支持，答应你创建具有复杂布局和样式的表格。你可以设置单元格的边框、背景颜色、合并单元格等。
[*] 支持图片： 你可以将图片添加到PDF文档中，支持从URL加载图片或利用Base64编码的图片数据。
[*] 支持页面布局： pdfmake 答应你设置页面的大小、方向和边距，以满足不同的打印和布局需求。
[*] 支持中文和多语言： pdfmake 对于国际化支持相当友好，包括对各种语言和字体的支持。
// 引入 pdfmake 库
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
// 注册字体
pdfMake.vfs = pdfFonts.pdfMake.vfs;
// 创建文档定义
const documentDefinition = {
content: [
{ text: 'Hello, PDFMake!', fontSize: 16, bold: true, alignment: 'center', margin: },
{
table: {
body: [
['Name', 'Age', 'Country'],
['John Doe', 25, 'USA'],
['Jane Doe', 30, 'Canada'],
],
},
},
{ image: 'data:image/jpeg;base64,...', width: 100, height: 100 },
],
};
// 创建PDF文档
const pdfDocGenerator = pdfMake.createPdf(documentDefinition);
// 下载PDF文件
pdfDocGenerator.download('example.pdf');
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]