前端實現文件下載

mylxsw 發布于2019-08-23 10:44 / 2594人閱讀

摘要：之前寫了一篇前端實現圖片下載，大部分場景下，文件下載都可以按照這個思路來實現。其實可以和后臺約定返回內容，前端通過監聽的內容實現監聽。縱觀源碼，主要實現上傳，可借鑒用于下載的方案并沒有發現對請求的狀態進行監聽。

之前寫了一篇《前端實現圖片下載》，大部分場景下，文件下載都可以按照這個思路來實現。

但是，最近遇到了一個新的需求——POST 下載。服務端只支持 POST 請求，而上一篇文章中涉及的大部分場景都是 GET 請求。

服務端實現

以 Node + Koa2 實現為例，服務端返回 excel 文件流

const fs = require("fs")
const path = require("path")

module.exports = ctx => {
  ctx.set("Content-Type", "application/vnd.ms-excel")
  ctx.set("Content-Disposition", "attachment; filename=download.xlsx")
  ctx.body = fs.createReadStream(path.resolve(__dirname, "./download.xlsx"))
}

兼容性好的老方案

經典的、兼容性好的方案可以通過構建 Form 表單來實現

let uuidIndex = 0

export default (url, params, method = "post") => {
  const uuid = `TMP_FRAME_NAME__${uuidIndex++}`
  const iframe = document.createElement("iframe")
  iframe.name = uuid
  iframe.style = "display:none"
  // 無論響應成功失敗，都會調用 onload
  // iframe.onload = success
  // iframe.onerror = fail
  document.body.appendChild(iframe)

  const form = document.createElement("form")
  form.action = url
  form.method = method
  form.target = uuid
  form.style = "display:none"
  form.enctype = "application/x-www-form-urlencoded"
  document.body.appendChild(form)

  if (params) {
    Object.keys(params).forEach(key => {
      const v = params[key]
      if (v !== undefined) {
        const input = document.createElement("input")
        input.type = "hidden"
        input.name = key
        input.value = v
        form.appendChild(input)
      }
    })
  }

  form.submit()
  document.body.removeChild(form)
  document.body.removeChild(iframe)
}

尋找新方案

產品提了一個需求，下載成功要提示，下載失敗也要提示。那么問題來了，上面的老方案，不太好監聽這次操作是正常還是異常。（其實可以和后臺約定返回內容，前端通過監聽 iframe 的內容實現監聽。）

插曲

有個 jQuery 插件 jquery.form.js API 中提供了對成功和失敗的回調。縱觀源碼，主要實現 form 上傳，可借鑒用于下載的方案并沒有發現對請求的狀態進行監聽。

正題

在經歷了以上插曲后，找到一種新的方案。

在新方案中，使用了一些 HTML5 的 API，例如 Blob。所以，兼容性需要 IE 10+ 。

function download(url, name) {
  const aLink = document.createElement("a")
  aLink.download = name
  aLink.href = url
  aLink.dispatchEvent(new MouseEvent("click", {}))
}

export default (data, name, type) => {
  const blob = new Blob([data], { type })
  const url = URL.createObjectURL(blob)
  download(url, name)
}

demo 一枚

import axios from "axios"
// 上面的新方案
import download from "./download" 

document.getElementById("button").addEventListener("click", () => {
  axios.post("/download", null, {
    // 記得設置為成以 buffer 格式讀取
    responseType: "arraybuffer"
  })
  .then((res) => {
    // 從響應頭里面讀取名字，當然，可以自定義
    const name = res.headers["content-disposition"].replace(/.*filename=/, "")
    download(res.data, name, "application/vnd.ms-excel")
  })
  .catch((error) => {
    console.log(error)
  })
})

吐槽

segmentfault 網站編輯器編輯 markdown 對 js 代碼塊的解析有 bug，帶了箭頭函數 // 注釋就失效了。

GPU云服務器云服務器前端實現前端實現websocket即時通信前端下載 html實現下載文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96631.html

node實現文件下載不得不說的那些事兒

摘要：如果像本例中這樣的場景會遇到這樣一個問題，詳見鏈接當請求參數過長或為了安全，就需要用到下載。寫到這里自己都忍不住想錘自己，給自己挖坑不說，這樣來回請求下載，流量，真的是敗家。這幾天一直在做遠程文件下載的事，現在總算有了解決，特來記錄一下踩過的坑和想揍自己的心需求應用場景是這樣的，底層邏輯數據請求接口是由Java寫的，也就是說原始文件存在Java服務端,返回時有加密措施由于工作...

Coly 2019-08-23 14:12 評論0 收藏0
簡談文件下載的三種方式

摘要：一前言本文章將以報表下載為例，給大家介紹三種文件下載的方式。通過二進制數據流的方式下載這種方式是我目前采用的方式，用于處理報表下載。缺點對于數據量不大的文件，這種方式是可行的。一、前言本文章將以excel報表下載為例，給大家介紹三種文件下載的方式。原文地址：簡談文件下載的三種方式 | Rychou 二、正文 1. 通過服務器文件地址下載這是最常見的文件下載方式，大多數網站的音頻...

lsxiao 2019-08-16 13:36 評論0 收藏0
簡談文件下載的三種方式

摘要：一前言本文章將以報表下載為例，給大家介紹三種文件下載的方式。通過二進制數據流的方式下載這種方式是我目前采用的方式，用于處理報表下載。缺點對于數據量不大的文件，這種方式是可行的。一、前言本文章將以excel報表下載為例，給大家介紹三種文件下載的方式。原文地址：簡談文件下載的三種方式 | Rychou 二、正文 1. 通過服務器文件地址下載這是最常見的文件下載方式，大多數網站的音頻...

2i18ns 2019-08-23 12:47 評論0 收藏0
實現前后端分離的心得

摘要：實現前后端分離的心得對目前的來說，前后端分離已經變得越來越流行了，越來越多的企業網站都開始往這個方向靠攏。前后端工作分配不均。實現前后端分離的心得對目前的web來說，前后端分離已經變得越來越流行了，越來越多的企業/網站都開始往這個方向靠攏。那么，為什么要選擇前后端分離呢？前后端分離對實際開發有什么好處呢? 為什么選擇前后端分離在以前傳統的網站開發中，前端一般扮演的只是切圖的工作...

zilu 2019-08-26 12:25 評論0 收藏0
前端UI組件復用工具

摘要：代碼復用總是程序員喜聞樂見的，前端組件化的最終目的就是復用，今天我們就將深入探討如何實現組件的復用。懶是第一生產力。代碼復用總是程序員喜聞樂見的，前端組件化的最終目的就是復用，今天我們就將深入探討如何實現UI組件的復用。通常我們所說的組件往往是包含業務邏輯的前端組件，而這類組件實際上很難實現廣義上的復用，頂多能在同一條業務線上復用一下，但UI組件就不一樣了，沒有了業務的約束，只在...

xuxueli 2019-08-20 17:31 評論0 收藏0