欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)文件下載并重命名代碼實(shí)例

 更新時(shí)間：2019年12月12日 10:36:27   作者：吾知的善良  
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文件下載并重命名代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

這篇文章主要介紹了JavaScript實(shí)現(xiàn)文件下載并重命名代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

第一種是HTML官網(wǎng)中的方法

<a href="/images/liang.jpg" rel="external nofollow" download="文件名稱">

HTML5 中 a 標(biāo)簽提供了一個(gè) filename 屬性，可以下載成指定的 download 屬性名稱

這種同源訪問(wèn)是沒有問(wèn)題的，但一跨域就不行了，試了其它方法，不是報(bào)跨域錯(cuò)誤，就是在當(dāng)前頁(yè)面打開文件，體驗(yàn)相當(dāng)不好。

第二種方案比較通用

/**
 * 獲取 blob
 * url 目標(biāo)文件地址
 */
function getBlob(url) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();

    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      }
    };

    xhr.send();
  });
}

/**
 * 保存 blob   
 * filename 想要保存的文件名稱
 */
function saveAs(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    const link = document.createElement('a');
    const body = document.querySelector('body');
　　　
    link.href = window.URL.createObjectURL(blob);
    link.download = filename;

    // fix Firefox
    link.style.display = 'none';
    body.appendChild(link);
    
    link.click();
    body.removeChild(link);

    window.URL.revokeObjectURL(link.href);
  }
}

/**
 * 下載
 * @param {String} url 目標(biāo)文件地址
 * @param {String} filename 想要保存的文件名稱
 */
function download(url, filename) {
  getBlob(url).then(blob => {
    saveAs(blob, filename);
  });
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 純js實(shí)現(xiàn)的論壇常用的運(yùn)行代碼的效果

    純js實(shí)現(xiàn)的論壇常用的運(yùn)行代碼的效果

    bluidea論壇的腳本板塊的版主寫的，不錯(cuò)，轉(zhuǎn)到這！
    2008-07-07
  • JS模擬超市簡(jiǎn)易收銀臺(tái)小程序代碼解析

    JS模擬超市簡(jiǎn)易收銀臺(tái)小程序代碼解析

    本文通過(guò)實(shí)例代碼給大家介紹了JS模擬超市簡(jiǎn)易收銀臺(tái)小程序代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
    2017-08-08
  • BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持

    BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持

    這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持 ,凡是涉及到用戶編輯信息然后保存的頁(yè)面，都涉及到一個(gè)數(shù)據(jù)是否符合要求的檢查，需要客服端和服務(wù)器端的校驗(yàn)的問(wèn)題，本文介紹非常詳細(xì)，具有參考價(jià)值，需要的朋友可以參考下
    2016-06-06
  • 使用JavaScript?定義自己的ajax函數(shù)

    使用JavaScript?定義自己的ajax函數(shù)

    這篇文章主要為大家介紹了JavaScript定義ajax函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助<BR>
    2021-11-11
  • JavaScript自定義日歷實(shí)現(xiàn)簽到功能

    JavaScript自定義日歷實(shí)現(xiàn)簽到功能

    這篇文章主要為大家詳細(xì)介紹了JavaScript自定義日歷實(shí)現(xiàn)簽到功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-08-08
  • JavaScript體驗(yàn)異步更好的解決辦法

    JavaScript體驗(yàn)異步更好的解決辦法

    本篇文章主要給大家講述了JavaScript體驗(yàn)異步更好的解決辦法，有這方面需要的朋友跟著學(xué)習(xí)參考下吧。
    2018-01-01
  • 原生JavaScript之es6中Class的用法分析

    原生JavaScript之es6中Class的用法分析

    這篇文章主要介紹了原生JavaScript之es6中Class的用法,結(jié)合實(shí)例形式對(duì)比分析了es6與es5相關(guān)class定義、區(qū)別及使用技巧,需要的朋友可以參考下
    2020-02-02
  • javascript中使用class和prototype的區(qū)別小結(jié)

    javascript中使用class和prototype的區(qū)別小結(jié)

    本文將介紹在JavaScript何時(shí)使用class以及何時(shí)使用prototype,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-08-08
  • Js圖片點(diǎn)擊切換輪播實(shí)現(xiàn)代碼

    Js圖片點(diǎn)擊切換輪播實(shí)現(xiàn)代碼

    這篇文章主要介紹了Js圖片點(diǎn)擊切換輪播實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07
  • uniapp實(shí)現(xiàn)滑動(dòng)評(píng)分效果

    uniapp實(shí)現(xiàn)滑動(dòng)評(píng)分效果

    這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)滑動(dòng)評(píng)分效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-09-09

最新評(píng)論