vue3.2 导出pdf文件或表格数据

IT全栈视野

已于 2023-09-08 10:01:29 修改

阅读量825

点赞数

文章标签： pdf vue.js 前端

于 2023-09-08 10:00:54 首次发布

本文链接：https://blog.youkuaiyun.com/m0_60459392/article/details/132753989

版权

要在Vue 3中导出PDF文件，你可以使用第三方库来处理PDF生成和导出。一个常用的库是jspdf，它允许你在客户端或服务器端生成PDF文档。以下是在Vue 3中使用jspdf库导出PDF文件的基本步骤：

第一步首先，安装jspdf库。你可以使用npm或yarn来安装它：

npm install jspdf --save 或 pnpm install jspdf --save

第二步在Vue组件中引入jspdf库：

实例代码：

<template>
  <div>
    <button type="primary" @click="generatePDF">生成PDF</button>
  </div>
</template>
<script lang="ts" setup>
import { jsPDF } from "jspdf";

const generatePDF = async () => {
  // 创建PDF文档对象
  const doc = new jsPDF();

  doc.text("Hello IT全栈视野", 10, 10);

  // 保存PDF文件  
  const fileName = 'my-pdf-file.pdf';   

  const data: any = doc.save(fileName);

  // 可以在浏览器中打开并下载PDF文件
  window.open(data);
};
</script>