• 网页中是否能实现下载文件夹?


    1.第一种方法:downFile(下载地址保存名称);

     

    function downFile(content, filename) {

        // 创建隐藏的可下载链接

        var eleLink = document.createElement('a');

        eleLink.download = filename;

        eleLink.style.display = 'none';

        // 字符内容转变成blob地址

        var blob = new Blob([content]);

        eleLink.href = URL.createObjectURL(blob);

        // 触发点击

        document.body.appendChild(eleLink);

        eleLink.click();

        // 然后移除

        document.body.removeChild(eleLink);

    };

     

    2.第二种方法:

     

    <a href="/api/getImg" download="file.xlsx">下载</a>

    download:此属性指示浏览器下载 URL 而不是导航到它,因此将提示用户将其保存为本地文件。如果属性有一个值,那么此值将在下载保存过程中作为预填充的文件名(如果用户需要,仍然可以更改文件名)。此属性对允许的值没有限制,但是 /   会被转换为下划线。大多数文件系统限制了文件名中的标点符号,故此,浏览器将相应地调整建议的文件名。

     

    注意:

     

    1.仅适用于同源URL

     

    2)尽管 HTTP URL 需要位于同一源中,但是可以使用 blob: URL  data: URL,以方便用户下载使用 JavaScript 生成的内容

     

    3)如果 HTTP 头中的 Content-Disposition 属性赋予了一个不同于此属性的文件名,HTTP 头属性优先于此属性(后端一般会设置Content-Disposition: attachment; filename="filename.jpg"

     

    缺点:IE不支持download属性、只能下载不能被浏览器打开的文件类型,图片、文本文件、html这种类型的文件无法直接下载可以被浏览器打开的只能在浏览器中预览。

     

    3DataUrlBlobUrl实现下载

     

    通过DataUrlBlobUrl可以实现图片、文本文件、html不预览直接下载,具体使用可以看这篇文章:https://blog.csdn.net/mo3408/article/details/90515277

     

    4.location.hrefiframe下载

     

    1  location.href = 'template.xlsx'

     

    2):

     

    // 无闪现下载excel

    function download(url) {

      const iframe = document.createElement('iframe');

      iframe.style.display = 'none';

      function iframeLoad() {

        console.log('iframe onload');

        const win = iframe.contentWindow;

        const doc = win.document;

        if (win.location.href === url) {

          if (doc.body.childNodes.length > 0) {

            // response is error

          }

          iframe.parentNode.removeChild(iframe);

        }

      }

      if ('onload' in iframe) {

        iframe.onload = iframeLoad;

      } else if (iframe.attachEvent) {

        iframe.attachEvent('onload', iframeLoad);

      } else {

        iframe.onreadystatechange = function onreadystatechange() {

          if (iframe.readyState === 'complete') {

            iframeLoad;

          }

        };

      }

      iframe.src = '';

      document.body.appendChild(iframe);

     

      setTimeout(function loadUrl() {

        iframe.contentWindow.location.href = url;

      }, 50);

    }

     

    5.应用

    axios({

          method: 'post',

          url: '/api/systemLog/downLoadLog',

          data: bodyData,

          responseType: 'arraybuffer'

        }).then((res) => {

          // type 为需要导出的文件类型,此处为xls表格类型

            const blob = new Blob( [res.data], {type: 'application/vnd.ms-excel'} )

            // 兼容不同浏览器的URL对象

            const url = window.URL || window.webkitURL || window.moxURL

            // 创建下载链接

            const downloadHref = url.createObjectURL(blob)

            // 创建a标签并为其添加属性

            let downloadLink = document.createElement('a')

            downloadLink.href = downloadHref

            downloadLink.download = '导出日志.xlsx'

            // 触发点击事件执行下载

            downloadLink.click()

    }

    )​

     

    6.使用down2插件:

    详细插件信息可以参考这篇文章:http://blog.ncmem.com/wordpress/2019/07/30/java%e4%b8%8b%e8%bd%bd%e5%a4%a7%e6%96%87%e4%bb%b6%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0/

  • 相关阅读:
    Java中String.valueOf()方法的解释
    React 16.13.1开启严格模式会触发两次render
    React开发中使用react-router-dom路由最新版本V5.1.2(三)路由嵌套子路由
    React开发中使用react-router-dom路由最新版本V5.1.2(二)路由跳转及传参
    React开发中使用react-router-dom路由最新版本V5.1.2(一)基本跳转属性
    vue 开发中实现provide和inject的响应式数据监听
    VUE开发中,数据变化后,修改了绑定对象的属性值后,页面dom没有发生变化,两种方法可以重新渲染$set和$forceUpdate
    VUE开发中.sync 修饰符的作用
    VUE开发中.native 修饰符的作用
    git报错:CONFLICT (modify/delete) ,git冲突,解决项目开发中改了相同文件同一行
  • 原文地址:https://www.cnblogs.com/songsu/p/11457174.html
Copyright © 2020-2023  润新知