将Json数据导出为Json文件或Excel文件；
读取外部Json文件或Excel文件内容使用；
1.从Json文件导入数据
使用ant design vue的upload组件，在上传文件中触发读取文件内容：
<a-upload @change="importJsonFile" >
<a-button>
<upload-outlined></upload-outlined>
Json文件导入数据
</a-button>
</a-upload>
importJsonFile(file){
if(file){
const readerJson=new FileReader()
readerJson.onload=()=>{
const result=JSON.parse(readerJson.result)
this.saveExcelFileData=result//result为读取文件内容
//console.log(result)
}
readerJson.readAsText(file.file.originFileObj)
}
},2.从Excel文件导入数据
要操作excel文件，vue中下载安装依赖XLSX
$npm install xlsx –-save在组件中import使用
import * as XLSX from 'xlsx'
//从Excel文件导入的
importExcelFile(file){
if(file){
// 通过FileReader对象读取文件
const reader = new FileReader();
// readAsArrayBuffer之后才会启动onload事件
reader.onload = () => {
const data = new Uint8Array(reader.result)
const { SheetNames, Sheets } = XLSX.read(data, {type: 'array'})
console.log(SheetNames, Sheets, '列')
SheetNames.forEach(item=>{
const workSheets = Sheets[item]
const sheetRows = XLSX.utils.sheet_to_json(workSheets);
this.saveExcelFileData=sheetRows
//console.log(sheetRows, '转换的excel')
})
}
// uploadFile是上传文件的文件流
reader.readAsArrayBuffer(file.file.originFileObj)
}
},3.导出数据为Json文件
需要安装依赖file saver
$npm install file-saver -–save<a-button type="success" @click="saveJsonFile()">数据导出为Json</a-button>
<a-button type="success" @click="saveExcelFile()">数据导出为Excel</abutton>saveJsonFile(){
const data=new Blob([JSON.stringify(this.saveExcelFileData)],{
type:'text/plain;charset=utf-8',
})
FileSaver.saveAs(data, 'saveFile.json')
},
4.导出数据为Excel文件
saveExcelFile(){
// 自定义下载的header，注意是数组中的数组哦
const Header = [['编号', '姓名']]
// 将JS数据数组转换为工作表。
const headerWs = XLSX.utils.aoa_to_sheet(Header);
const ws = XLSX.utils.sheet_add_json(headerWs, this.saveExcelFileData, {skipHeader: true, origin: 'A2'})
/* 新建空的工作表 */
const wb = XLSX.utils.book_new()
// 可以自定义下载之后的sheetname
XLSX.utils.book_append_sheet(wb, ws, 'sheetName')
XLSX.utils.book_append_sheet(wb, ws, 'sheetName1')
/* 生成xlsx文件 */
XLSX.writeFile(wb, 'saveFile.xlsx')
},5. 从Docx导入
//从Docx文件导入
importDocxFile(file){
// 通过FileReader对象读取文件
const readerDocx = new FileReader();
// readAsArrayBuffer之后才会启动onload事件
readerDocx.onload = () => {
const result=readerDocx.result
mammoth.convertToHtml({arrayBuffer:result}).then(r=>{
this.addConcept.contents=r.value
//console.log(r.value)
})
}
// uploadFile是上传文件的文件流
readerDocx.readAsArrayBuffer(file.file.originFileObj)
}6.从Txt导入
//从txt文件导入的
importTxtFile(file){
const readerTxt=new FileReader()
readerTxt.onload=()=>{
const result=readerTxt.result.toString()
this.addConcept.contents=result
console.log(result)
}
readerTxt.readAsText(file.file.originFileObj,"GB2312") //使用UTF-8会乱码
},