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>
相关推荐
会飞的小菠菜17 小时前
多个PDF文档如何批量删除页眉处的多余信息
pdf·页眉页脚·批量删除
看兵马俑的程序员1 天前
RAG实现-本地PDF内容加载和切片
开发语言·python·pdf
神奇的小猴程序员1 天前
Mutantcat Web Pdf Reader —— 开源、轻量、安全的网页 PDF 阅读器
前端·pdf
ekkcole1 天前
java把word转pdf使用jar包maven依赖
java·pdf·word
Java小王子呀1 天前
Java实现Excel转PDF
java·pdf·excel
阿登林2 天前
C# iText7与iTextSharp导出PDF对比
开发语言·pdf·c#
工藤学编程2 天前
零基础学AI大模型之LangChain PyPDFLoader实战与PDF图片提取全解析
人工智能·langchain·pdf
big狼王2 天前
SonarQube本地化搭建及代码检测并导出报告PDF
java·pdf·sonarqube·sonarscanner
半兽先生2 天前
在线预览docx、ppt、excel、doc、pdf等文档解决方案
pdf
冬夜戏雪2 天前
基于rapidocr 的文档解析(pdf转md)工具(已部署)
pdf·运维开发