本次案例是vue的点击生成pdf文件和png格式的图片
一、生成pdf文件案例
看代码之前，我们肯定得需要看看，效果图是什么的啦，这样子才能先看看自己想要实现的效果是不是这样子的！上效果图嘿嘿嘿~
A、实现的效果图
这是页面，点击生成pdf则可以生成文件
这就是效果图啦，如果是你想要的效果，那我们一起来look一下详细代码~
B、代码
（1）首先，我们要引入依赖
npm install html2canvas jspdf（2）代码
<template>
<div>
<h1>页面标题</h1>
<p>这是一些页面内容...</p>
<button @click="generatePDF">生成PDF</button>
</div>
</template>
<script>
// 引入依赖
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
export default {
methods: {
async generatePDF() {
try {
// 将需要生成PDF的DOM元素转换为Canvas
const element = document.querySelector('div'); // 这里选择整个div作为示例
//也可以上面定义一个id，然后document.getElementById('id');
const canvas = await html2canvas(element);
// 使用jsPDF将Canvas转换成PDF
const imgData = canvas.toDataURL('image/png');
//jsPDF('p', 'mm', 'a4') 第一个参数p（portrait）意思是纵向，横向为l（landscape）
//第二个参数是单位，mm是毫米，第三个是文档页面的大小
const pdf = new jsPDF('p', 'mm', 'a4'); // A4大小，纵向
//定义pdf的宽高
const imgWidth = pdf.internal.pageSize.getWidth();
const imgHeight = canvas.height * imgWidth / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
pdf.save('download.pdf'); // 保存PDF
} catch (error) {
console.error('生成PDF失败:', error);
}
},
},
};
</script>
<style>
/* 你的样式 */
</style>这些代码就可以实现基本的，点击按钮，生成pdf文件啦~
二、生成png图片的案例
老样子，来看看效果图
A、效果图
B、代码
（1）引入依赖
npm install html2canvas
（2）案例代码
<template>
<div>
<!-- 这里是你想要转换成图片的HTML内容 -->
<div id="capture" style="padding: 10px; background: #f5f5f5;">
<h4>这是标题</h4>
<p>这是一些文本内容...</p>
</div>
<button @click="capture">生成图片并保存</button>
</div>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
methods: {
async capture() {
try {
// 捕获指定元素的截图
const canvas = await html2canvas(document.querySelector('#capture'));
// 将canvas转换成图片URL
const image = canvas.toDataURL("image/png");
// 创建一个链接元素用于下载
const link = document.createElement('a');
link.download = 'page-snapshot.png'; // 指定下载文件的名称
link.href = image;
link.click(); // 模拟点击进行下载
// 清理
link.remove();
} catch (error) {
console.error('截图失败:', error);
}
}
}
}
</script>
<style scoped>
/* 你的样式 */
</style>
