1.需求:点击上传txt文件,先读取txt文件中的内容进行展示。
上传使用的是element的upload如下:
<el-upload action="/"
ref="upload"
accept=".txt"
:before-upload="beforeUpload"
:disabled="this.fileList.length !== 0"
:default-file-list="this.fileList"
>
<el-button type="primary" :disabled="this.fileList.length !== 0">上传文件</el-button>
</el-upload>
下面是业务逻辑
beforeCreate() {
// 读取文件
FileReader.prototype.reading = function ({encode} = pms) {
let bytes = new Uint8Array(this.result); //无符号整型数组
let text = new TextDecoder(encode || 'UTF-8').decode(bytes);
return text;
};
/* 重写readAsBinaryString函数 */
FileReader.prototype.readAsBinaryString = function (f) {
if (!this.onload) //如果this未重写onload函数,则创建一个公共处理方式
this.onload = e => { //在this.onload函数中,完成公共处理
let rs = this.reading();
console.log(rs);
};
this.readAsArrayBuffer(f); //内部会回调this.onload方法
};
},
methods:{
beforeUpload(file){
this.fileList = [file]
console.log('选择了文件beforeUpload')
// 读取数据
this.read(file);
return false
},
read(f) {
let rd = new FileReader();
rd.onload = e => {
//this.readAsArrayBuffer函数内,会回调this.onload函数。在这里处理结果
//text中的内容
let cont = rd.reading({encode: 'GBK'});
console.log(cont);
//截取内容中的回车换行符返回是数组
var asd = cont.split("\r\n")
for (let i = 0; i < asd.length; i++) {
let obj = {}
let str = asd[i]
obj.seq = i + 1;
obj.chkpart = str.split(",")[0]
obj.gdno = str.split(",")[1]
// obj.checkQty = str.split(",")[2] ? str.split(",")[2] : ''
this.retailCheckDetailList.push(obj)
}
let formerData = this.textData;
this.textData = formerData + "\n" + cont;
};
rd.readAsBinaryString(f);
}
}
2.下载数据为txt 格式
//1.安装 FileSaver包
npm install file-saver --save
//2.在main.js中全文引入
import {saveAs} from 'file-saver';
//3.将字符串转为Blob对象(然后触发这个事件就能成功啦)
var data = '要导出的内容'
let str = new Blob([data], {type: 'text/plain;charset=utf-8'});
// 注意这里要手动写上文件的后缀名
saveAs(str, `导出文件时的名字.txt`);
//成功以后就会自动下载一个文件