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