本次案例是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>
