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>
相关推荐
梨小橙子5 小时前
PPT画图,如何用Visio转化为pdf,且无白边
pdf·powerpoint
云只上5 小时前
解决Luckysheet在线预览编辑Excel、PDF.....无法在同一个界面创建多个luckysheet实列问题
pdf
inxunoffice7 小时前
批量给 PDF 添加页眉页脚以及页码信息
前端·javascript·pdf
学c真好玩8 小时前
4.1-python操作wrod/pdf 文件
开发语言·python·pdf
绘绘~8 小时前
软考-数据库系统工程师第四版pdf
pdf·软考·数据库系统工程师
nzz_17121410 小时前
puppeteer+express服务端导出页面为pdf
pdf·express
inxunoffice19 小时前
批量给 PDF 添加或删除密码保护,支持设置打开密码、只读密码、限制复制和打印
运维·服务器·pdf
inxunoffice19 小时前
批量清空或者删除 PDF 文档中作者、创建程序、修改时间等元数据
pdf
开开心心就好1 天前
便携免安装,畅享近 30 种 PDF 文档处理功能
java·服务器·python·eclipse·pdf·word·excel
The Future is mine1 天前
python将pdf文件转为图片,如果pdf文件包含多页,将转化的多个图片通过垂直或者水平合并成一张图片
pdf