前端文件下载

1. <a> 标签 下载 

   ---

   HTML原理 

   //创建URL 利用a标签属性下载
   <a href="url" download="<fileName>">导出/下载</a>

   JS实现方法

         let blobUrl = window.URL.createObjectURL(result);
         const a = document.createElement('a')
         a.style.display = 'none';
         a.download = '<線體信息>';
         a.href = blobUrl;
         a.click();

   数据导出 

   exportFile() {
       fetch(url, {
         method: 'POST',
         body: JSON.stringify(arg),
         headers: {
           'Content-Type': 'application/json; charset=utf-8'
         }
       }).then(res => {
         //二进制文件转换  .json()
         return res.blob();
       }).then(result => {
         let blobUrl = window.URL.createObjectURL(result)
         const a = document.createElement('a')
         a.style.display = 'none';
         a.download = '<fileName>';
         a.href = blobUrl;
         a.click();
       });
     }
   
   //GET
       let url = `${this.intSrv.daoChuData}?flag=${this.parmas.flag}&lineName=${this.parmas.lineName}`
       const a = document.createElement('a')
       a.style.display = 'none';
       a.setAttribute('target', '_blank');
       a.href = url;
       a.click();

    

 

• 点赞
• 收藏
• 分享
• • 文章举报

weixin_42675177 发布了14 篇原创文章 · 获赞 0 · 访问量 8487 私信 关注

标签：文件,style,const,前端,blobUrl,result,document,click,下载
来源： https://blog.csdn.net/weixin_42675177/article/details/103953161