Json データを Json ファイルまたは Excel ファイルとしてエクスポートします。
外部 Json ファイルまたは Excel ファイルの内容を読み取ります。
1. Jsonファイルからデータをインポートする
ant design vue のアップロード コンポーネントを使用して、アップロードされたファイルのファイル コンテンツの読み取りをトリガーします。
<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 ファイルを操作するには、XLSX に依存する vue でダウンロードしてインストールします
$npm install xlsx –-save
インポートしてコンポーネントで使用する
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 ファイルとしてエクスポートする
依存関係ファイルセーバーをインストールする必要があります
$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文件导入的
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会乱码
},