vue+file-saver+xlsx+htmlToPdf+jspdf实现本地导出PDF和Excel

页面效果如下(echarts图表按需添加,以下代码中没有)
在这里插入图片描述

1、安装插件

npm install xlsx  --save
npm install file-saver --save
npm install html2canvas --save
npm install jspdf --save

2、main.js引入html2canvas

import htmlToPdf from '@/utils/htmlToPdf';//单独封装Vue.use(htmlToPdf);

3、单独封装htmlToPdf.js放到utils目录下

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {install(Vue, options) {Vue.prototype.getPdf = function (htmlTitle) {var title = htmlTitle;//导出PDF的名称html2Canvas(document.querySelector('#pdfDom'), { //这是在界面上设置一个id//只下载id为pdfDom的内容// html2Canvas(document.body, { //body是下载整个界面useCORS: true, //是否尝试使用CORS从服务器加载图像allowTaint: false,}).then(function (canvas) {let contentWidth = canvas.width;let contentHeight = canvas.height;let pageHeight = contentWidth / 592.28 * 841.89; // 一页pdf显示html页面生成的canvas高度;let leftHeight = contentHeight; //未生成pdf的html页面高度let position = 0;//pdf页面偏移//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高let imgWidth = 595.28;let imgHeight = 592.28 / contentWidth * contentHeight;let pageData = canvas.toDataURL('image/jpeg', 1.0);let PDF = new JsPDF('', 'pt', 'a4');// 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围,无需分页if (leftHeight < pageHeight) {PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save(title + '.pdf')})}}
}

4、页面使用

<template><!--  el-table多级表头,行、列合并--><div class="table-wrap"><p style="margin: 30px"><!--给按钮绑定事件--><el-button type="primary" size="small" @click="exportExcel">点击导出Excel</el-button><el-button type="success" size="small" @click="getPdf('统计表')">导出PDF</el-button></p><div id="pdfDom"><el-table :data="tableData" border id="out-table"><el-table-column label="2019年单招兼报高水平" align="center"><el-table-column prop="type" label="统考类型" align="center" /><el-table-column prop="dx" label="大项" align="center" /><el-table-column prop="xx" label="小项" align="center" /><el-table-column prop="jj" label="运动健将" align="center" /><el-table-column prop="yj" label="一级运动员" align="center" /></el-table-column></el-table></div></div>
</template><script>// 引入导出Excel表格依赖import FileSaver from "file-saver";import * as XLSX from "xlsx";export default {name: 'demo',data() {return {tableData: [{type: '统考项目', dx: '冰雪', xx: '速度滑冰', jj: '2', yj: 10},{type: '统考项目', dx: '冰雪', xx: '短道滑冰', jj: '1', yj: 12},{type: '统考项目', dx: '棒球', xx: '棒球', jj: '5', yj: 9},{type: '非统考项目', dx: '篮球', xx: '篮球', jj: '3', yj: 17},{type: '非统考项目', dx: '排球', xx: '排球', jj: '1', yj: 15},{type: '统考项目', dx: '冰雪', xx: '速度滑冰', jj: '2', yj: 10},{type: '统考项目', dx: '冰雪', xx: '短道滑冰', jj: '1', yj: 12},{type: '统考项目', dx: '棒球', xx: '棒球', jj: '5', yj: 9},],}},mounted(){},methods: {//定义导出Excel表格事件exportExcel() {/* 从表生成工作簿对象 */var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));/* 获取二进制字符串作为输出 */var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array"});try {FileSaver.saveAs(//Blob 对象表示一个不可变、原始数据的类文件对象。//Blob 表示的不一定是JavaScript原生格式的数据。//File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。//返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。new Blob([wbout], { type: "application/octet-stream" }),//设置导出文件名称"统计表.xlsx");} catch (e) {if (typeof console !== "undefined") console.log(e, wbout);}return wbout;},}}
</script>
<style scoped lang="less">#pdfDom{overflow: hidden;padding: 40px 60px;box-sizing: border-box;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/104711.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【java】LinkedList 和 ArrayList的简介与对比

Java LinkedList和 ArrayList 在使用上&#xff0c;几乎是一样的。由于LinkedList是基于双向链表的&#xff0c;会多出list.getFirst();获取头部元素等方法 链表&#xff08;Linked list&#xff09;是一种常见的基础数据结构&#xff0c;是一种线性表&#xff0c;但是并不会按…

JavaWeb学习-Day10

SpringBootWeb案例 准备工作 开发流程&#xff1a; 开发接口步骤&#xff1a; 删除部门&#xff1a; 新增部门&#xff1a; 简化代码&#xff1a; limit:分页展示&#xff0c;公式&#xff1a;&#xff08;页数-1&#xff09;*页面总数&#xff0c;页面总数 目前出现的问题&am…

VR全景:助力乡村振兴,实现可持续发展

引言&#xff1a; 随着科技的飞速发展&#xff0c;虚拟现实&#xff08;VR&#xff09;全景技术正在以惊人的速度改变着我们的生活方式和产业格局。全景技术不仅在娱乐、教育等领域取得了巨大成功&#xff0c;也为乡村振兴提供了全新的机遇。通过以乡村为背景的VR全景体验&…

AR室内导航技术之技术说明与效果展示

随着科技的飞速发展&#xff0c;我们周围的环境正在经历着一场数字化的革命。其中&#xff0c;AR室内导航技术以其独特的魅力&#xff0c;为我们打开了一扇通往全新数字化世界的大门。本文将为您详细介绍这一技术的实现原理、工具应用以及成品展示&#xff0c;带您领略AR室内导…

opencv-全景图像拼接

运行环境 python3.6 opencv 3.4.1.15 stitcher.py import numpy as np import cv2class Stitcher:#拼接函数def stitch(self, images, ratio0.75, reprojThresh4.0,showMatchesFalse):#获取输入图片(imageB, imageA) images#检测A、B图片的SIFT关键特征点&#xff0c;并计算…

RunnerGo中WebSocket、Dubbo、TCP/IP三种协议接口测试详解

大家好&#xff0c;RunnerGo作为一款一站式测试平台不断为用户提供更好的使用体验&#xff0c;最近得知RunnerGo新增对&#xff0c;WebSocket、Dubbo、TCP/IP&#xff0c;三种协议API的测试支持&#xff0c;本篇文章跟大家分享一下使用方法。 WebSocket协议 WebSocket 是一种…

【Linux】权限问题

Linux权限 一、Linux 权限的概念二、Linux 权限管理1. 文件访问者的分类2. 文件类型和访问权限&#xff08;事物属性&#xff09;3. 文件访问权限的相关设置方法 三、默认权限1. 对文件和目录进行操作需要的权限2. 文件和目录的默认权限3. 粘滞位 一、Linux 权限的概念 Linux …

达梦数据库物化视图介绍

概述 本文将介绍达梦数据库物化视图&#xff0c;给出其概念及相关创建、使用示例。 1.物化视图概念 物化视图 (MATERIALIZED VIEW) 是目标表在特定时间点上的一个副本&#xff0c;占用存储空间&#xff0c;即将查询出来的数据存储在数据库中。当所依赖的一个或多个基表的数据…

bh002- Blazor hybrid / Maui 使用ORM和数据库快速教程

接上篇 bh002- Blazor hybrid / Maui 保存设置快速教程 源码 10. 添加引用 Index.razor.cs 添加引用 using FreeSql.DataAnnotations; #if WINDOWS using Windows.Storage; #endif 11. 简单使用freesql ORM 初始化数据,添加数据 public partial class Index {[DisplayNam…

[oneAPI] 基于BERT预训练模型的命名体识别任务

[oneAPI] 基于BERT预训练模型的命名体识别任务 Intel DevCloud for oneAPI 和 Intel Optimization for PyTorch基于BERT预训练模型的命名体识别任务语料介绍数据集构建使用示例 命名体识别模型前向传播模型训练 结果 参考资料 比赛&#xff1a;https://marketing.csdn.net/p/f3…

Unity - 制作package 插件包

1.将制作的插件包代码放置一个根目录下 2.在跟目录下创建package.json文件 //package.json {"name": "com.unity.customlibrary", //插件包名:com.组织名.包名"displayName": "CustomLibrary", //显示的插件名"v…

OpenCV项目开发实战--基于Python/C++实现鼠标注释图像和轨迹栏来控制图像大小

鼠标指针是图形用户界面 (GUI) 中的关键组件。没有它,您就无法真正考虑与 GUI 进行交互。那么,让我们深入了解 OpenCV 中鼠标和轨迹栏的内置函数。我们将演示如何使用鼠标来注释图像,以及如何使用轨迹栏来控制图像的大小 我们将使用下图来演示 OpenCV 中鼠标指针和轨迹栏功能…

保护函数返回的利器——Linux Shadow Call Stack

写在前面 提到内核栈溢出的漏洞缓解&#xff0c;许多朋友首先想到的是栈内金丝雀&#xff08;Stack Canary&#xff09;。今天向大家介绍一项在近年&#xff0c;于Android设备中新增&#xff0c;且默默生效的安全机制——影子调用栈&#xff1a;SCS&#xff08;Shadow Call St…

Kafka单节点部署

&#x1f388; 作者&#xff1a;互联网-小啊宇 &#x1f388; 简介&#xff1a; CSDN 运维领域创作者、阿里云专家博主。目前从事 Kubernetes运维相关工作&#xff0c;擅长Linux系统运维、开源监控软件维护、Kubernetes容器技术、CI/CD持续集成、自动化运维、开源软件部署维护…

iptables的使用规则

环境中为了安全要限制swagger的访问&#xff0c;最简单的方式是通过iptables防火墙设置规则限制。 在测试服务器中设置访问swagger-ui.html显示如下&#xff0c;区分大小写&#xff1a; iptables设置限制访问9783端口的swagger字段的请求&#xff1a; iptables -A INPUT -p t…

leetcode304. 二维区域和检索 - 矩阵不可变(java)

前缀和数组 二维区域和检索 - 矩阵不可变题目描述前缀和代码演示 一维数组前缀和 二维区域和检索 - 矩阵不可变 难度 - 中等 原题链接 - 二维区域和检索 - 矩阵不可变 题目描述 给定一个二维矩阵 matrix&#xff0c;以下类型的多个请求&#xff1a; 计算其子矩形范围内元素的总…

Java抽象类

Java中的抽象类&#xff08;Abstract Class&#xff09;是一种特殊类型的类&#xff0c;它无法被实例化&#xff0c;只能被用作其他类的基础。抽象类用于定义具有共同特征和行为的一组相关类的共同结构和方法。抽象类可以包含抽象方法&#xff08;没有具体实现的方法&#xff0…

VR防地质灾害安全教育:增强自然灾害知识,提高自我保护意识

VR防地质灾害安全教育系统是一种虚拟仿真技术&#xff0c;可以通过虚拟现实技术模拟地震、泥石流、滑坡等地质灾害的发生和应对过程&#xff0c;帮助人们提高应对突发自然灾害的能力。这种系统的优势在于可以增强自然灾害知识&#xff0c;提高自我保护意识&#xff0c;锻炼人们…

MyBatis分页插件PageHelper的使用及特殊字符的处理

目录 一、PageHelper简介 1.什么是分页 2.PageHelper是什么 3.使用PageHelper的优点 二、PageHelper插件的使用 原生limit查询 1. 导入pom依赖 2. Mybatis.cfg.xml 配置拦截器 3. 使用PageHelper进行分页 三、特殊字符的处理 1.SQL注入&#xff1a; 2.XML转义&#…

一、Kafka概述

目录 1.1 定义1.2 消息队列1、传统消息队列的应用场景2、消息队列的两种模式 1.3 Kafka的基础架构 1.1 定义 Kafka传 统定义&#xff1a;Kafka是一个分布式的基于发布/订阅模式的消息队列&#xff08;Message Queue&#xff09;&#xff0c;主要应用于大数据实时处理领域。 K…