Vue点击按钮生成pdf文件/Vue点击按钮生成png图片

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