vue前端实现base64转excel格式文件并下载
vue前端实现base64转excel格式文件并下载
·
base64ToFile的js文件
const util = {
// 创建一个a标签,并做下载点击事件
downloadFile: function(blob, fileName) {
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = fileName
// 此写法兼容可火狐浏览器
document.body.appendChild(link)
const evt = document.createEvent('MouseEvents')
evt.initEvent('click', false, false)
link.dispatchEvent(evt)
document.body.removeChild(link)
},
// 将Base64文件转为 Blob
buildBlobByByte: function(data) {
const raw = window.atob(data)
const rawLength = raw.length
const uInt8Array = new Uint8Array(rawLength)
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i)
}
return new Blob([uInt8Array])
},
// 二进制数组 生成文件
downloadFileByByte: function(data, fileName) {
const blob = this.buildBlobByByte(data)
this.downloadFile(blob, fileName)
}
vue文件
<el-link
:underline="false"
class="el-icon-view el-icon--right"
@click="downloadView"
style="color:red"
>下载查看:错误信息汇总表</el-link
>
第一种:(推荐)
<script>
// 这里引入封装好的base64转excel的js文件
import util from '@/utils/base64ToFile'
export default {
data() {
return {
errurl: ''
}
},
methods:{
// 推荐这种方法
downloadView() {
// this.errurl是后台返回的路径
util.downloadFileByByte(this.errurl, '错误信息汇总表.xlsx')
}
}
}
</script>
第2种:(不推荐)这种写法不兼容office的低版本,下载之后查看报错,不建议使用这种写法
<script>
// 这里引入封装好的base64转excel的js文件
import util from '@/utils/base64ToFile'
export default {
data() {
return {
errurl: ''
}
},
methods:{
// 这种写法不兼容office的低版本,下载之后查看报错,不建议使用这种写法
downloadView() {
var raw = window.atob(this.errurl);
var uInt8Array = new Uint8Array(this.errurl.length);
for (var i = 0; i < raw.length; i++) {
uInt8Array[i] = raw.charCodeAt(i);
}
const link = document.createElement('a');
const blob = new Blob([uInt8Array], {
type: 'application/vnd.ms-excel'
});
link.style.display = 'none';
link.href = URL.createObjectURL(blob);
link.setAttribute('download', '错误信息汇总表' + '.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
util.downloadFileByByte(this.errurl, '错误信息汇总表.xlsx')
}
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)