Json生成Excel，预览Excel(前端)

前端生成Excel，预览Excel

一、xlsx

sheetJs 中文文档

npm i xlsx

1、代码详情

<template>
  <div>
    <input type="file" id="fileInput" @change="uploadChange" />
    <div v-html="vHtml"></div>
  </div>
</template>
<script setup lang="ts">
import * as XLSL from 'xlsx'
import { ref } from 'vue'
//v-html
const vHtml = ref<string>('')

// 文件上传
function uploadChange() {
  // 读取上传后的文件
  const file = document.getElementById('fileInput').files[0]
  // 创建FileReader实例
  const reader = new FileReader()
  // 指定读取的内容是ArrayBuffer类型的数据
  reader.readAsArrayBuffer(file)
  reader.onload = () => {
    // 读取完成，调用XLSL的read函数获取解析上传的xlsx
    let workbook = XLSL.read(reader.result, { type: 'array' })
    // 一般都只有一个sheet,取第一个sheet的名称，方便取到sheet的数据
    let sheetNames = workbook.SheetNames[0]
    // 根据sheet的名称获取sheet数据解析成html
    let html = XLSL.utils.sheet_to_html(workbook.Sheets[sheetNames])
    // 将渲染容器替换成解析出来的html标签渲染
    vHtml.value = html
  }
}
</script>

<style>
/** 自定义表格样式 **/
table {
  border: 1px solid black;
}

th {
  border: 1px solid black;
}
td {
  border: 1px solid black;
}
</style>

2、项目（有ant-design-vue）

<template>
  <div>
    <input type="file" id="fileInput" @change="uploadChange" />
    <a-table :dataSource="dataSource" :columns="columns" bordered />
  </div>
</template>
<script setup lang="ts">
import * as XLSL from 'xlsx'
import { ref } from 'vue'

interface rowType {
  [key: string]: string
}
const columns = ref<rowType[]>([])
const dataSource = ref<rowType[]>([])

// 文件上传
function uploadChange() {
  // 读取上传后的文件
  const file = document.getElementById('fileInput').files[0]
  // 创建FileReader实例
  const reader = new FileReader()
  // 指定读取的内容是ArrayBuffer类型的数据
  reader.readAsArrayBuffer(file)
  reader.onload = () => {
    // 读取完成，调用XLSL的read函数获取解析上传的xlsx
    let workbook = XLSL.read(reader.result, { type: 'array' })
    // 一般都只有一个sheet,取第一个sheet的名称，方便取到sheet的数据
    let sheetNames = workbook.SheetNames[0]
    // 根据sheet的名称获取sheet数据解析成json
    let jsonData = XLSL.utils.sheet_to_json(
      workbook.Sheets[sheetNames]
    ) as rowType[]
    // 取excel第一行当表头
    Object.keys(jsonData[0]).forEach((item: string) => {
      columns.value.push({
        title: item,
        dataIndex: item,
      })
    })

    // 其他行都当做数据
    jsonData.forEach((item: rowType) => {
      let obj: rowType = {}
      Object.keys(item).map((key: string) => {
        obj[key] = item[key]
      })
      dataSource.value.push(obj)
    })
  }
}
</script>

二、vue-json-pretty

若要实现文档 JSON 格式和 Excel 表格的在线预览，你可以使用第三方库来实现。对于文档 JSON 格式，你可以使用 vue-json-pretty 库来展示美观的 JSON 数据；对于 Excel 表格，你可以使用 vue-excel-viewer 库来完成在线预览。

npm install vue-json-pretty vue-excel-viewer --save

main.js

import { createApp } from 'vue'
import App from './App.vue'
import VueJsonPretty from 'vue-json-pretty'
import VueExcelViewer from 'vue-excel-viewer'
 
const app = createApp(App)
app.component('VueJsonPretty', VueJsonPretty)
app.component('VueExcelViewer', VueExcelViewer)
app.mount('#app')

在 Vue 模板中，使用 <vue-json-pretty> 组件来展示 JSON 数据

<template>
  <div>
    <h2>JSON 数据</h2>
    <vue-json-pretty :data="jsonData"></vue-json-pretty>
 
    <h2>Excel 表格</h2>
    <vue-excel-viewer :data="excelData"></vue-excel-viewer>
  </div>
</template>
 
<script setup  lang="ts">
 
import { defineComponent,ref,reavtive } from 'vue'
const jsonData = reavtive <any>({
    foo: 'bar',
    baz: [1, 2, 3]
    // 这里是你的 JSON 数据
})
const  excelData =ref('path/to/excel.xlsx')  // 这里是你的 Excel 文件路径或 URL
</script>

拓展

后端 kkFileView 可以实现多种文档在线预览

最后建议：太过复杂的表格还是不要放在前端做，很影响用户体验