Skip to content

前端玩转Office,Word、Excel

1163字约4分钟

Vue文件预览

2024-05-16

背景介绍

对于日常开发中后台系统项目中,肯定避免不了对文件的操作;文件上传、预览等功能。为了用户体验、交互,你也需要这些知识。

Excel操作(xlsx)

# 安装xlsx
npm i xlsx

xlsx提供了很多文件的操作方式,这里说一下常见的三种处理方式:

  • Bolo文件流
  • html Dom对象
  • json 对象
  1. 功能一:文件读取

处理流程:

  1. Bolo文件流可以是后台接口返回的也可以通过input选择的
  2. 通过arrayBuffer处理文件
  3. 然后将这个Buffer交给xlsx的方法读取为book对象
  4. 提取出对应的sheet对象
  5. 格式转化
<input type="file" name="file" @change="change">
//引入xlsx工具
import { read, writeFile, utils } from 'xlsx'

change(e) {
	//获取文件
	let file = e.target.files[0]
	//转化为arrayBufferr
	file.arrayBuffer().then(res => {
		//读取book对象
		let wb = read(res)
		console.log(wb);
	})
}

在这里插入图片描述在这里插入图片描述 这个对象里有一些重要的属性:sheets表示excel里有那些表,详细的记录了表里的数据。

sheets里面目前就只有一张sheet1这张表,直接取出

change(e) {
	//获取文件
	let file = e.target.files[0]
	//转化为arrayBufferr
	file.arrayBuffer().then(res => {
		//读取book对象
		let wb = read(res)
		 //取出sheet1表
        let sheet = wb.Sheets.Sheet1
        console.log(sheet);
	})
}

在这里插入图片描述 由于取出的表数据不易查看,那就需要借助xlsx的utils进行转换

在这里插入图片描述 这个就是提供的sheet转化为容易看懂的数据,方法命名就很人性话容易了解.

  • sheet_to_html:转化为html格式
  • sheet_to_json:转化为json格式

这里就把数据转化为html格式渲染到页面上去

<div class="title">功能一:本地文件读取</div>
<input type="file" name="file" @change="change">
<div class="excel-content" v-html="htmlDOM"></div>
change(e) {
	//获取文件
    let file = e.target.files[0]
    //转化为arrayBufferr
    file.arrayBuffer().then(res => {
      //读取book对象
      let wb = read(res)
      //取出sheet1表
      let sheet = wb.Sheets.Sheet1
      //数据转化为html,并渲染到页面
      this.htmlDOM = utils.sheet_to_html(sheet)
    })
}

在这里插入图片描述 请求接口数据做法其实是一样的,但是注意的是请求的时候需要添加响应类型,responseType:'blob',这样接口返回的就是blob,然后按照上面操作就行。

  1. 功能二:dom、json转化为excel

处理流程:

  1. dom、json数据转化为sheet对象
  2. 创建workbook
  3. excel文件输出
//json转化为excel
jsonExcel() {
	let jsonArr = [
		{ id: 1, name: '小明', age: 16 },
		{ id: 2, name: '小红', age: 18 },
		{ id: 3, name: '小张', age: 10 }
	]
	//json转化为sheet
	let sheet = utils.json_to_sheet(jsonArr)
	//创建workbook
	let wb = utils.book_new()
	/**
	* 往工作簿里添加表
	* 参数一:工作簿
	* 参数二:工作表
	* 参数三:表名
	*/
	utils.book_append_sheet(wb,sheet,'sheet1')
	//文件下载
	writeFile(wb,'test.xlsx')
}
tableExcel() {
	//获取dom
	let dom = this.$refs.tableRef
	//table转化为sheet
	let sheet = utils.table_to_sheet(dom)
	//创建workbook
	let wb = utils.book_new()
	//加入表
	utils.book_append_sheet(wb, sheet, 'sheet')
	//保存
	writeFile(wb, 'test1.xlsx')
}

表格转化的时候utils提供了一个方法utils.table_to_book(),可以直接转化为book,然后进行保存。

文件预览

  • Excel预览
#安装依赖
npm i @vue-office/excel vue-demi @vue/composition-api

@vue-office/excel是一个组件,引入注册使用即可

import vueofficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
<vueofficeExcel :src="excelSrc" style="height: 100vh;"></vueofficeExcel>

在这里插入图片描述 src可以使用线上的路径地址,但有时候后端返回的是文件流或者本地input选择的文件时那该怎么办?其实src也可以使用dataURL路径也就是base64,只需要把文件转化成base64也是可以预览的。

preview(e){
	let file = e.target.files[0]
	let f = new FileReader()
	f.readAsDataURL(file)
	f.onload=(e=>{
		this.excelSrc = e.target.result
	})
}

在这里插入图片描述

  • word预览
#安装依赖
npm i @vue-office/docx vue-demi @vue/composition-api

@vue-office/docx是一个组件,引入注册使用即可

import vueofficeword from '@vue-office/docx'
import '@vue-office/excel/lib/index.css'
<vueofficeword :src="wordSrc" style="height: 92vh;"></vueofficeword>

在这里插入图片描述

  • PDF预览

这个可以直接在浏览器中预览的

最后

了解这些操作方法,完全可以封装一个业务组件用来预览一些常见文件,这样就增强了系统的用户体验。

扩展

  • docxtemplater: 根据模板通过修改数据生成内容 官方文档
  • file-saver: 文件保存 参考文档
  • pizzip: 一个用Javascript创建、读取和编辑.zip文件的库 参考文档

书洞笔记