工作总结系列---【vue页面实现导出效果的两种方法】

工作情景：在工作中，页面有一个导出表格按钮，点击就会出现表格，作为工作小白，第一次遇到这个问题不知道如何把表格从底部弹出，不过最后实现效果了

实现步骤:
方法一:后端返回的是一个文件流形式的（需要处理文件流，转为blob）

1.封装请求：
ecport function exportTableApi(paramsdata){
 return Request({
 url:'url',
 method:"get",
 params:{...paramsdata},
 responseType:"blob" // 记得写上
 })
}

<template>
  <div><button @click="exporttable">导出表格</button></div>
</template>

<script>
export default {
  data() {
    return {
      paramsObj: "",
      yearTitle: "",
      monthTitle: "",
    };
  },
 methods:{
    // 点击发送请求：
   getExportTable(params){
    exportTableApi(params).then((res)=>{
    // 转码处理（工作中遇到下载word文档，加上转码这一部分就解决了  目前不知道为啥 先记录一下吧  遇到问题再来搬）
    // var raw = window.atob(res);
    // var uInt8Array = new Uint8Array(raw.length);
    // for (var i = 0; i < raw.length; i++) {
    //  uInt8Array[i] = raw.charCodeAt(i);
    // }
    // let blob = new Blob([uInt8Array],{
    //    type: 'application/msword' // 发现去掉可以导出（下载）pdf图片 Excel docx文件等
    // })
    let downloadElement=document.createElement("a");
    let blob=new Blob([res],{
      type:"application/vnd.ms-excel;charset=utf-8"
    });
    const fileName="案件占比.xls";
    let href=window.URL.createObjectURL(blob);//创建下载的链接
    downloadElement.href=href;
    downloadElement.download=fileName;//下载后文件名
    // downloadElement.setAttribute('download','案件占比.xls');
    document.body.appendChild(downloadElement);
    downloadElement.click();//点击下载
    document.body.removedChild(downloadElement);//下载完成移除元素
    window.URL.revokeObjectURL(href) //释放blob
    })
    .catch(err=>{
    console.log("下载失败，err")
    })
	
   },
    // 3.点击发送请求
   exporttable(){
       this.getExportTable()
   }
}
};
</script>

<style>
</style>

方法二：后端已经处理好文件，前端只需要使用window.open打开

getExportTable(params){
	window.open(getBaseUrl() + ‘page/rest/xxxxxx’ + '?' + params )
}

// 处理域名和端口
export function getBaseUrl(){
	return process.env.NODE_ENV === "development"? process.env.BASE_API:`${location.protocol}//${location.host}/cmtmdr`
}