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

本次案例是vue的点击生成pdf文件和png格式的图片

一、生成pdf文件案例

看代码之前,我们肯定得需要看看,效果图是什么的啦,这样子才能先看看自己想要实现的效果是不是这样子的!上效果图嘿嘿嘿~

A、实现的效果图

这是页面,点击生成pdf则可以生成文件

这就是效果图啦,如果是你想要的效果,那我们一起来look一下详细代码~

B、代码

(1)首先,我们要引入依赖
复制代码
npm install html2canvas jspdf
(2)代码
html 复制代码
<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)引入依赖
html 复制代码
npm install html2canvas
(2)案例代码
html 复制代码
<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>
相关推荐
孤客网络科技工作室7 小时前
Python - 100天从新手到大师:第二十七天Python操作PDF文件
开发语言·python·pdf
Bella_chene17 小时前
Excel转PDF不分页
pdf·excel
RuiyuanZHOU17 小时前
tkinter+pymupdf开发的简单pdf查看编辑器
pdf·tkinter·pymupdf
诗句藏于尽头17 小时前
关于win11的Microsoft To Pdf打印机修改端口后无法再刷新显示于设备界面的问题
pdf
Time_Memory_cici17 小时前
Wiley出版社WileyNJDv5_Template模板编译不能生成PDF解决办法
pdf
NON-JUDGMENTAL2 天前
《Local_Pdf_Chat_RAG 深度学习笔记:PDF 本地化对话的 RAG 原理与实践》
笔记·pdf
Metaphor6922 天前
Java 旋转 PDF 页面:使用 Spire.PDF 实现高效页面处理
java·经验分享·pdf
拓端研究室2 天前
专题:2025零售数字化与即时零售竞争洞察报告|附130+份报告PDF、数据仪表盘汇总下载
pdf·零售
精致先生3 天前
多模态PDF解析
pdf·大模型·rag
啦啦9117143 天前
Print Conductor打印软件安装教程!一款非常好用的批量打印软件!支持PDF、Word、Excel、图片等
pdf·excel