这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

前言

在前端开发中,有时候一些业务场景中,我们有需求要去实现excel的预览和打印功能,本文在vue3中如何实现Excel文件的预览和打印。

预览excel

关于实现excel文档在线预览的做法,一种方式是通过讲文档里的数据处理成html,一种是将文档处理成图片进行预览。

首先我们先讲一下实现html这种方式预览的。Excel预览用的是xlsx这个库。

xlsx

xlsx是一个优秀的表格处理库,是一款适用于浏览器和nodejs的开源电子表格解析库

安装

这里值得注意的是,vue2和vue3的引用写法不一样

// vue2 引用 xlsx
import xlsx from 'xlsx'
// vue3 引用 xlsx
import * as XLSX from 'xlsx'

使用

FileReader读取文件流

先使用FileReader对象提供的一种读取File对象内容的方法,将文件流用readAsBinaryString方法根据二进制字符串的形式返回,再通过reader.onload操作读取文件流的二进制字符串形式

// 实例化 FileReader 对象
const reader = new FileReader()
// file为文件流
reader.readAsBinaryString(file) reader.onload = function () {
const binaryStringData = reader.result
console.log(binaryStringData)
}

代码

vue3上传excel并在线预览

那么vue3中如何预览Excel文件呢,这里现用一个ant-design-vue的上传组件上传一个excel文件,如下:

(1)创建组件

添加ant-design-vue upload上传组件,用于上传文件用来预览excel并转化其为html的组件。包含一个文件上传的按钮和预览区域,如下图:

使用XLSX.utils.sheet_to_html方法将工作表(workSheet)转化成html表格的字符串表示,然后显示在前端页面,按照表格的行列结构进行排序,从而实现在线预览的效果, 如下:

这里值得注意的是添加table的样式:

效果

打印excel

安装

yarn add vue3-print-nb

我们使用vue3-print-nb打印excel表格,在点击打印按钮时触发打印事件。

问: 如何使用vue3-print-nb库打印

答: 使用v-print指令

vue3全局引入print

import { createApp } from 'vue'
import App from './App.vue' import print from 'vue3-print-nb' const app = createApp(App)
app.use(print).mount('#app')

代码

这种打印情况,除非是整页window.print()打印,打印单个表格的话,我们上传完excel表,把数据渲染到表格中再进行打印,像这样:

XLSX.utils.sheet_to_json用于将excel表格中的工作表(sheet)转换成JSON格式的函数.

这里我们通过转换出来的json赋值给table,如下:

template

script

效果

总结

excel文件预览,借用了xlsx库来读取excel文件流,通过XLSX.utils.sheet_to_html来实现在线文件的预览。

eccel文件打印,借用了vue3-print-nb库来进行用户点击打印按钮时,打印某个区域范围的内容,通过XLSX.utils.sheet_to_json解析文件流转化成JSON数据,再通过v-print指令进行绑定区域打印。

本文转载于:

https://juejin.cn/post/7292975471448670248

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--vue3实现excel文件预览和打印的更多相关文章

  1. PLSQL导入Excel文件预览不到数据行问题

    今天,从Excel导入Oracle一些数据,在导入的过程中,遇到一个问题,Excel里面有好几万条数据,但是通过PLSQL导入向导导入Excel文件之后,在PLSQL里却预览不到数据行,只能看见标题行 ...

  2. java项目中Excel文件预览

    package com.linkonworks.df.busi.utils; import java.io.File; import java.io.FileInputStream; import j ...

  3. 手把手教你用 Spring Boot搭建一个在线文件预览系统!支持ppt、doc等多种类型文件预览

    昨晚搭建环境都花了好一会时间,主要在浪费在了安装 openoffice 这个依赖环境上(Mac 需要手动安装). 然后,又一步一步功能演示,记录,调试项目,并且简单研究了一下核心代码之后才把这篇文章写 ...

  4. Word/Excel 在线预览

    前言 近日项目中做到一个功能,需要上传附件后能够在线预览.之前也没做过这类似的,于是乎就查找了相关资料,.net实现Office文件预览大概有这几种方式: ① 使用Microsoft的Office组件 ...

  5. 关于pc端 app端pdf,word xls等文件预览的功能

    第一种用H5标签<iframe>标签实现 返回的文件类型,文件流,文件流返回必须在设置 contentType对应的Mime Type, 返回文件的物理位置. 已经实测可以支持的文件类型 ...

  6. COS控制台进阶 - 文件预览和在线编辑

    导语 | COS控制台新上线了文件预览功能,用户可在控制台内直接预览.编辑文件内容. 前不久,微软发布了 vscode for web 的公告,是基于web的在线代码编辑器,无需下载安装可以直接在we ...

  7. Blazor组件自做十四 : Blazor FileViewer 文件预览 组件

    Blazor FileViewer 文件预览 组件 目前支支持 Excel(.docx) 和 Word(.xlsx) 格式 示例: https://www.blazor.zone/fileViewer ...

  8. java实现office文件预览

    不知觉就过了这个久了,继上篇java实现文件上传下载后,今天给大家分享一篇java实现的对office文件预览功能. 相信大家在平常的项目中会遇到需要对文件实现预览功能,这里不用下载节省很多事.大家请 ...

  9. Qt SD卡 文件系统挂载、文件预览

    /********************************************************************************** * Qt SD卡 文件系统挂载. ...

  10. Jquery.Treeview+Jquery UI制作Web文件预览

    效果图: 前台Html: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="D ...

随机推荐

  1. Linux centos7.6 在线及离线安装postgresql12 详细教程(rpm包安装)

    一.在线安装 官网找到对应的版本 PostgreSQL:  https://www.postgresql.org/ 1.配置yum源 sudo yum install -y https://downl ...

  2. Ubuntu安装PHP和NGINX环境

    Ubuntu安装PHP和NGINX环境 介绍 PHP-FPM PHP-FPM 是 PHP FastCGI Process Manager 的缩写,是 FastCGI 进程管理器. PHP-FPM 是基 ...

  3. NC16742 [NOIP2002]字串变换

    题目链接 题目 题目描述 已知有两个字串 A, B及一组字串变换的规则(至多6个规则): A1 -> B1 A2 -> B2 规则的含义为:在A中的子串 A1可以变换为 B1.A2可以变换 ...

  4. NC14701 取数游戏2

    题目链接 题目 题目描述 给定两个长度为n的整数列A和B,每次你可以从A数列的左端或右端取走一个数.假设第i次取走的数为ax,则第i次取走的数的价值vi=bi⋅ax,现在希望你求出∑vi的最大值. 输 ...

  5. react实战 系列

    react实战 系列(未完结,持续更新中...) 前言 学习 react 的方法,比较常规的是跟着官方文档边看边做,可是 react 的官网教程有点难(至少比 vue 的难),亦或买几本讲基础的或实战 ...

  6. Laravel入坑指南(7)——中间件Middleware

    Laravel框架中引入了"中间件"这个概念,笔者觉得不是太合适.这里的Middleware和Java Servlet中的过滤器(Filter)就是一个东西,但是想比之下Filte ...

  7. docker基于commit方式为镜像添加SSH服务

    下载启动镜像 docker pull ubuntu: 18.04 docker run -it ubuntu:18.04 bash 配置软件源 备份/etc/apt/sources.list#备份cp ...

  8. 树莓派/Linux ubuntu 开机自动改网络mac地址(主要适用于拷贝内存卡的情况/不同树莓派mac地址不同)

    树莓派/Linux ubuntu 开机自动改网络mac地址(主要适用于拷贝内存卡的情况/不同树莓派mac地址不同) yaml文件名根据自己原卡中名字更改 address=$(cat /sys/clas ...

  9. 利用wiile双层循环打印各种星星---day06

    # 十行十列小星星 j = 0 #定义行数 while j<10: #当行数小于10的时候 i=0 #定义列 while i <10: #当列小于10的时候 print('*',end=' ...

  10. django学习第三天---django模板渲染,过滤器,反向循环 reversed,自定义标签和过滤器,模板继承

    django模板渲染 模板渲染,模板指的就是html文件,渲染指的就是字符串替换,将模板中的特殊符号替换成相关数据 基本语法 {{ 变量 }} {% 逻辑 %} 变量使用 示例 Views.py文件 ...