记录--vue3实现excel文件预览和打印

这篇具有很好参考价值的文章主要介绍了记录--vue3实现excel文件预览和打印。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

记录--vue3实现excel文件预览和打印

前言

在前端开发中,有时候一些业务场景中,我们有需求要去实现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的组件。包含一个文件上传的按钮和预览区域,如下图:

记录--vue3实现excel文件预览和打印

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

记录--vue3实现excel文件预览和打印

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

记录--vue3实现excel文件预览和打印

效果

记录--vue3实现excel文件预览和打印

打印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表,把数据渲染到表格中再进行打印,像这样:

记录--vue3实现excel文件预览和打印

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

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

template

记录--vue3实现excel文件预览和打印

 script

记录--vue3实现excel文件预览和打印

效果

记录--vue3实现excel文件预览和打印

总结

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文件预览和打印文章来源地址https://www.toymoban.com/news/detail-711081.html

到了这里,关于记录--vue3实现excel文件预览和打印的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件

    Luckysheet 是一个类似于 excel 的在线电子表格,功能强大、配置简单且完全开源。 安装 Luckysheet 1、通过CDN引入依赖 由于 Luckysheet 现在还没有发布出模块化的开发,不能使用 npm,所以我们需要在 VUE 项目中手动引入相关文件。编辑 public/index.html 文件,在里面添加如下代码 2、指

    2023年04月22日
    浏览(103)
  • vue 实现 word/excel/ppt/pdf 等文件格式预览操作

    第三方服务接口地址:XDOC文档预览服务 特征: 有文件大小限制,超过要收费! 使用方法  参考地址:https://api.gitee.com/zhou_andong/vue-office/ 一、安装插件 vue-office 二、在引用时会涉及版本不兼容的问题 可以在npm包库 ,查看版本:https://www.npmjs.com/ 1、搜索插件名 2、以下版本没

    2024年02月16日
    浏览(85)
  • vue + vue-office 实现多种文件(docx、excel、pdf)的预览

    支持多种文件( docx、excel、pdf )预览的vue组件库,支持vue2/3。也支持非Vue框架的预览。 github: 《仓库地址》 演  示: 《演示效果》 一站式:提供docx、pdf、excel多种文档的在线预览方案,有它就够了 简单:只需提供文档的src(网络地址)即可完成文档预览 体验好:选择每个文档

    2024年02月12日
    浏览(43)
  • Vue3实现PDF文件预览 (低版本浏览器兼容)

    前言:         最近和小伙伴们一起合作完成一个企业级知识库项目,其中一个功能就是后端把所有格式的文件转换为PDF,前端实现渲染PDF文件从而实现预览,干了整整一周(考虑到低版本浏览器的兼容),试用了几种方案(iframe预览已被废弃,不适用本项目,想了解的同学

    2024年01月20日
    浏览(43)
  • #vue3 实现前端下载excel文件模板功能

    一、需求: 前端无需通过后端接口,即可实现模板下载功能。 通过构造一个 JSON 对象,使用前端常用的 第三方库 xlsx ,可以直接将该 JSON 对象转换成 Excel 文件,让用户下载模板 二、效果: 三、源码如下:

    2024年01月19日
    浏览(70)
  • 【学习记录20】vue使用blob流预览word ,Excel,pdf,TXT,图片,视频

    TXT,PDF直接使用浏览器本身预览 excel使用插件 xlsx, 这个插件需要用到arraybuffer的流格式,我是使用前端转换的详见js代码,也可以叫后台返回arraybuffer的数据流 word 使用插件  docx-preview 话不多说直接上菜,css样式自己调就行 npm install xlsx --save npm install docx-preview --save 思路来

    2024年02月13日
    浏览(46)
  • 前端vue3实现本地及在线文件预览(含pdf/txt/mp3/mp4/docx/xlsx/pptx)

    (一)微软office免费预览( 推荐 ) 支持doc/docx/xls/xlsx/ppt/pptx等多种office文件格式的免费预览 (二)XDOC文档预览云服务  移动端和PC端无插件预览PDF、OFD、Word、WPS等多种格式文档 本地或内网预览需要借助插件实现,pdf、mp3、mp4等主要靠原生标签或浏览器自带功能,尽量减少

    2024年02月05日
    浏览(75)
  • 【Vue】使用print.js插件实现打印预览功能,超简单

    目录 一、实现效果  二、实现步骤 【1】安装插件 【2】在需要打印的页面导入 【3】在vue文件中需要打印的部分外层套一层div,给div设置id。作为打印的区域 【4】在打印按钮上添加打印事件 【5】在methods中添加点击事件 三、完整代码   print.js插件,可以打印html、pdf、json数

    2024年02月14日
    浏览(49)
  • vue3+element-plus上传文件,预览文件

    vue3+ts+element-plus上传文件,预览文件 场景:使用element-plus的el-upload标签,手动上传文件,可预览docx,xlsx,pdf,jpg,jpeg,png(本地资源以及网络资源)。 1、使用el-upload标签 检查上传文件的文件格式与大小 上传的附件信息在fileList中,组装接口所需数据进行上传 使用docx-preview插件预览

    2024年02月11日
    浏览(56)
  • element ui vue 附件预览组件、可预览图片、excel 、pdf.word等文件(浏览器打开文件的方式)

    目录 1.组件源码  2.html 代码 3.组件源码  此组件就是一个单纯的预览图片、浏览器打开文件的形式简单的组合了下而成的,word、excel是直接下载、pdf浏览器打开的形式,如果想本地打开直接预览的话就直接不用看了。word、excel、pdf 的图片是我放到服务器上的图片地址。 1.组

    2024年02月11日
    浏览(77)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包