日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > HTML >内容正文

HTML

前端JS通过Ajax下载后端返回的Excel文档

發布時間:2025/1/21 HTML 49 豆豆
生活随笔 收集整理的這篇文章主要介紹了 前端JS通过Ajax下载后端返回的Excel文档 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

我們來看下效果演示:
條件假設:

  • 首先得有一個下載文檔的接口,我們假設這個接口的地址是myurl

  • 其次我們一般使用token來區分用戶是否有權下載,假設令牌為token

  • html部分比較簡單

    <button type="button" id="test">下載</button>

    JS部分(這里假設你引用了jquery)

    $(function() {function download(filename) {var oReq = new XMLHttpRequest();oReq.open("GET", myurl, true); /*鏈接地址后續要修改,改成你要下載的文檔地址,也就是接口地址*/oReq.responseType = "blob";oReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); oReq.setRequestHeader("Authorization",token); /*token為身份令牌,看你的接口是否需要,若不需要刪除這一行即可*/oReq.onload = function (oEvent) {var content = oReq.response;var elink = document.createElement('a');elink.download = filename;elink.style.display = 'none'; var blob = new Blob([content], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); /*type的這個定義文檔下載為excel格式*/elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();document.body.removeChild(elink);};oReq.send();}$(document).on("click", "#test", function() {download("test"); }

    參考文章:

    實際結果問題的: https://www.cnblogs.com/sunweinan/p/excel.html https://www.cnblogs.com/soyxiaobi/p/9362516.html 解釋的很清楚的: https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/

    總結

    以上是生活随笔為你收集整理的前端JS通过Ajax下载后端返回的Excel文档的全部內容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。