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函数获取解析上传的xlsxlet workbook = XLSL.read(reader.result, { type: 'array' })// 一般都只有一个sheet,取第一个sheet的名称，方便取到sheet的数据let sheetNames = workbook.SheetNames[0]// 根据sheet的名称获取sheet数据解析成htmllet 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函数获取解析上传的xlsxlet workbook = XLSL.read(reader.result, { type: 'array' })// 一般都只有一个sheet,取第一个sheet的名称，方便取到sheet的数据let sheetNames = workbook.SheetNames[0]// 根据sheet的名称获取sheet数据解析成jsonlet 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>