日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
(干貨)前端實現(xiàn)導(dǎo)出excel的功能

 什么是 Blob
Blob() 構(gòu)造函數(shù)返回一個新的 Blob 對象。blob 的內(nèi)容由參數(shù)數(shù)組中給出的值的串聯(lián)組成。

在潯陽等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作定制設(shè)計,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都營銷網(wǎng)站建設(shè),外貿(mào)網(wǎng)站制作,潯陽網(wǎng)站建設(shè)費用合理。

 
 
 
 
    
  
  
  
  
  1. var aBlob = new Blob( array, options ); 
    2.

兼容性

mimeType[2]
在 Blob 的構(gòu)造函數(shù)中options參數(shù)的接受一個參數(shù)type,這個參數(shù)代表的是媒體類型,告訴瀏覽器是什么類型的文件,常見的有

 
 
 
 
    
  
  
  
  
  1. {".3gp",    "video/3gpp"}, 
    2.   
  
  
  
  2. {".apk",    "application/vnd.android.package-archive"}, 
    3.   
  
  
  
  3. {".asf",    "video/x-ms-asf"}, 
    4.   
  
  
  
  4. {".avi",    "video/x-msvideo"}, 
    5.   
  
  
  
  5. {".bin",    "application/octet-stream"}, 
    6.   
  
  
  
  6. {".bmp",    "image/bmp"}, 
    7.   
  
  
  
  7. {".c",  "text/plain"}, 
    8.   
  
  
  
  8. {".class",  "application/octet-stream"}, 
    9.   
  
  
  
  9. {".conf",   "text/plain"}, 
    10.   
  
  
  
  10. {".cpp",    "text/plain"}, 
    11.   
  
  
  
  11. {".doc",    "application/msword"}, 
    12.   
  
  
  
  12. {".docx",   "application/vnd.openxmlformats-officedocument.wordprocessingml.document"}, 
    13.   
  
  
  
  13. {".xls",    "application/vnd.ms-excel"}, 
    14.   
  
  
  
  14. {".xlsx",   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}, 
    15.   
  
  
  
  15. {".exe",    "application/octet-stream"}, 
    16.   
  
  
  
  16. {".gif",    "image/gif"}, 
    17.   
  
  
  
  17. {".gtar",   "application/x-gtar"}, 
    18.   
  
  
  
  18. {".gz", "application/x-gzip"}, 
    19.   
  
  
  
  19. {".h",  "text/plain"}, 
    20.   
  
  
  
  20. {".htm",    "text/html"}, 
    21.   
  
  
  
  21. {".html",   "text/html"}, 
    22.   
  
  
  
  22. {".jar",    "application/java-archive"}, 
    23.   
  
  
  
  23. {".java",   "text/plain"}, 
    24.   
  
  
  
  24. {".jpeg",   "image/jpeg"}, 
    25.   
  
  
  
  25. {".jpg",    "image/jpeg"}, 
    26.   
  
  
  
  26. {".js", "application/x-javascript"}, 
    27.   
  
  
  
  27. {".log",    "text/plain"}, 
    28.   
  
  
  
  28. {".m3u",    "audio/x-mpegurl"}, 
    29.   
  
  
  
  29. {".m4a",    "audio/mp4a-latm"}, 
    30.   
  
  
  
  30. {".m4b",    "audio/mp4a-latm"}, 
    31.   
  
  
  
  31. {".m4p",    "audio/mp4a-latm"}, 
    32.   
  
  
  
  32. {".m4u",    "video/vnd.mpegurl"}, 
    33.   
  
  
  
  33. {".m4v",    "video/x-m4v"}, 
    34.   
  
  
  
  34. {".mov",    "video/quicktime"}, 
    35.   
  
  
  
  35. {".mp2",    "audio/x-mpeg"}, 
    36.   
  
  
  
  36. {".mp3",    "audio/x-mpeg"}, 
    37.   
  
  
  
  37. {".mp4",    "video/mp4"}, 
    38.   
  
  
  
  38. {".mpc",    "application/vnd.mpohun.certificate"}, 
    39.   
  
  
  
  39. {".mpe",    "video/mpeg"}, 
    40.   
  
  
  
  40. {".mpeg",   "video/mpeg"}, 
    41.   
  
  
  
  41. {".mpg",    "video/mpeg"}, 
    42.   
  
  
  
  42. {".mpg4",   "video/mp4"}, 
    43.   
  
  
  
  43. {".mpga",   "audio/mpeg"}, 
    44.   
  
  
  
  44. {".msg",    "application/vnd.ms-outlook"}, 
    45.   
  
  
  
  45. {".ogg",    "audio/ogg"}, 
    46.   
  
  
  
  46. {".pdf",    "application/pdf"}, 
    47.   
  
  
  
  47. {".png",    "image/png"}, 
    48.   
  
  
  
  48. {".pps",    "application/vnd.ms-powerpoint"}, 
    49.   
  
  
  
  49. {".ppt",    "application/vnd.ms-powerpoint"}, 
    50.   
  
  
  
  50. {".pptx",   "application/vnd.openxmlformats-officedocument.presentationml.presentation"}, 
    51.   
  
  
  
  51. {".prop",   "text/plain"}, 
    52.   
  
  
  
  52. {".rc", "text/plain"}, 
    53.   
  
  
  
  53. {".rmvb",   "audio/x-pn-realaudio"}, 
    54.   
  
  
  
  54. {".rtf",    "application/rtf"}, 
    55.   
  
  
  
  55. {".sh", "text/plain"}, 
    56.   
  
  
  
  56. {".tar",    "application/x-tar"}, 
    57.   
  
  
  
  57. {".tgz",    "application/x-compressed"}, 
    58.   
  
  
  
  58. {".txt",    "text/plain"}, 
    59.   
  
  
  
  59. {".wav",    "audio/x-wav"}, 
    60.   
  
  
  
  60. {".wma",    "audio/x-ms-wma"}, 
    61.   
  
  
  
  61. {".wmv",    "audio/x-ms-wmv"}, 
    62.   
  
  
  
  62. {".wps",    "application/vnd.ms-works"}, 
    63.   
  
  
  
  63. {".xml",    "text/plain"}, 
    64.   
  
  
  
  64. {".z",  "application/x-compress"}, 
    65.   
  
  
  
  65. {".zip",    "application/x-zip-compressed"}, 
    66.   
  
  
  
  66. {"",        "*/*"} 
    67.

導(dǎo)出
我們需要調(diào)取接口來獲取導(dǎo)出文件的內(nèi)容,如果我們先后端分離的話，我們需要接口給我們返回Buffer, Blob, DOMString類型的數(shù)據(jù),DOMStrings會被編碼為UTF-8。

 
 
 
 
    
  
  
  
  
  1. let blob = new Blob([接口返回的數(shù)據(jù)], { 
    2.   
  
  
  
  2.     type: "application/vnd.ms-excel;charset=utf-8" 
    3.   
  
  
  
  3. }); 
    4.

使用a標簽,模擬點擊a標簽完成導(dǎo)出功能,通過URL.createObjectURL()[3]方法創(chuàng)建一個下載的鏈接地址,最后在不需要的時候URL.revokeObjectURL釋放掉

 
 
 
 
    
  
  
  
  
  1. let downloadElement = document.createElement("a"); 
    2.   
  
  
  
  2. let href = window.URL.createObjectURL(blob); //創(chuàng)建下載的鏈接 
    3.   
  
  
  
  3. downloadElement.href = href; 
    4.   
  
  
  
  4. document.body.appendChild(downloadElement); 
    5.   
  
  
  
  5. downloadElement.click(); //點擊下載 
    6.   
  
  
  
  6. document.body.removeChild(downloadElement); //下載完成移除元素 
    7.   
  
  
  
  7. window.URL.revokeObjectURL(href); //釋放掉blob對象 
    8.

文件名的設(shè)置
文件名稱通過報文頭設(shè)置content-disposition屬性設(shè)置,Content-Disposition參數(shù)：

 
 
 
 
    
  
  
  
  
  1. attachment --- 作為附件下載 
    2.   
  
  
  
  2. inline --- 在線打開 
    3.  
 
 
 

 
 
 
 
    
  
  
  
  
  1. setHeader("Content-Disposition","inline; filename=文件名.mp3"); 
    2.   
  
  
  
  2. setHeader("Content-Disposition","attachment;filename=test.xls"); 
    3.

前端通過截取報文頭里的content-disposition字段獲取文件名稱:

 
 
 
 
    
  
  
  
  
  1. downloadElement.download =decodeURI( 
    2.   
  
  
  
  2.     res.headers["content-disposition"].split("filename=")[1] 
    3.   
  
  
  
  3. ) || ""; //下載后文件名 
    4.

完整代碼
這里的res代表后臺返回的數(shù)據(jù):

 
 
 
 
    
  
  
  
  
  1. config: {url: "/ExportExcel", method: "post", data: "", headers: {…}, baseURL: "/api/", …} 
    2.   
  
  
  
  2. data: Blob {size: 5120, type: "application/vnd.ms-excel"} 
    3.   
  
  
  
  3. headers: {connection: "close", content-disposition: "attachment;filename=xxx.xls", content-encoding: "gzip", content-length: "1455", content-type: "application/vnd.ms-excel;charset=UTF-8", …} 
    4.   
  
  
  
  4. request: XMLHttpRequest {readyState: 4, timeout: 30000, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ?, …} 
    5.   
  
  
  
  5. status: 200 
    6.   
  
  
  
  6. statusText: "OK" 
    7.

前端代碼

 
 
 
 
    
  
  
  
  
  1. let blob = new Blob([res.data], { 
    2.   
  
  
  
  2.     type: "application/vnd.ms-excel;charset=utf-8" 
    3.   
  
  
  
  3. }); 
    4.   
  
  
  
  4. let downloadElement = document.createElement("a"); 
    5.   
  
  
  
  5. let href = window.URL.createObjectURL(blob); //創(chuàng)建下載的鏈接 
    6.   
  
  
  
  6. downloadElement.href = href; 
    7.   
  
  
  
  7. downloadElement.download = 
    8.   
  
  
  
  8. decodeURI( 
    9.   
  
  
  
  9.     res.headers["content-disposition"].split("filename=")[1] 
    10.   
  
  
  
  10. ) || ""; //下載后文件名 
    11.   
  
  
  
  11. document.body.appendChild(downloadElement); 
    12.   
  
  
  
  12. downloadElement.click(); //點擊下載 
    13.   
  
  
  
  13. document.body.removeChild(downloadElement); //下載完成移除元素 
    14.   
  
  
  
  14. window.URL.revokeObjectURL(href); //釋放掉blob對象 
    15.

寫在最后
導(dǎo)出功能多種多樣,根據(jù)瀏覽器的不同和需求的不同會有不同的問題出現(xiàn)其中的坑還是比較多的,適合自己需求的才是最好的。


標題名稱：(干貨)前端實現(xiàn)導(dǎo)出excel的功能
瀏覽地址：http://www.dlmjj.cn/article/dpjdgio.html