zoukankan      html  css  js  c++  java
  • chrome实现下载文件JS代码弹出'另存为'窗口

    1.TXT类型文件

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
      <script>
        function fake_click(obj) {
          var ev = document.createEvent("MouseEvents");
          ev.initMouseEvent(
            "click", true, false, window, 0, 0, 0, 0, 0
            , false, false, false, false, 0, null
          );
          obj.dispatchEvent(ev);
        }
    
        function myExport(name, data) {
          var urlObject = window.URL || window.webkitURL || window;
    
          // 有效的命名空间URI
          // HTML - 参阅 http://www.w3.org/1999/xhtml
          // SVG - 参阅 http://www.w3.org/2000/svg
          // XBL - 参阅 http://www.mozilla.org/xbl
          // XUL - 参阅 http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
    
          var myFile = new Blob([data]);
          var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
          save_link.href = urlObject.createObjectURL(myFile);
          save_link.download = name;
          fake_click(save_link);
        }
    
    
        myExport('filename.xlsx', "helloworld!"); 
      </script>
    </body>
    
    </html>
    

    2.表格保存弹出另存为框

     fake_click(obj) {
          var ev = document.createEvent('MouseEvents')
          ev.initMouseEvent(
            'click',
            true,
            false,
            window,
            0,
            0,
            0,
            0,
            0,
            false,
            false,
            false,
            false,
            0,
            null
          )
          obj.dispatchEvent(ev)
        },
        // 测试代码-测试使用打开另存为窗口
        myTestT() {
          // Blob 格式 Excel 文件下载export
          console.log('123456')
          let url = 'http://10.10.10.22/aa/ddd/myExcel.xlsx'
          axios
            .get(url, {
              responseType: 'blob',
              params: {}
            })
            .then(res => {
              // res.data 是一个 blob 流格式
              var myFile = new Blob([res.data])
              var save_link = document.createElementNS(
                'http://www.w3.org/1999/xhtml',
                'a'
              )
              var urlObject = window.URL || window.webkitURL || window
              save_link.href = urlObject.createObjectURL(myFile)
              // 要么就让用户手动加.xlsx,要么就没有另存为窗口
              // save_link.download = 'myExcel.xlsx' // 如果这里不写.xlsx就可以打开另存为按钮
              save_link.download = 'myExcel'
              this.fake_click(save_link)
            })
        },
        myExport(name, data) {
          var urlObject = window.URL || window.webkitURL || window
    
          // 有效的命名空间URI
          // HTML - 参阅 http://www.w3.org/1999/xhtml
          // SVG - 参阅 http://www.w3.org/2000/svg
          // XBL - 参阅 http://www.mozilla.org/xbl
          // XUL - 参阅 http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
    
          var myFile = new Blob([data])
          var save_link = document.createElementNS(
            'http://www.w3.org/1999/xhtml',
            'a'
          )
          save_link.href = urlObject.createObjectURL(myFile)
          save_link.download = name
          this.fake_click(save_link)
        },
        // 测试代码-测试使用打开另存为窗口
    

    下一个方法: 设置A标签,src直接对应一个可以下载的链接,以及download 可以用户右键另存为

    最靠谱的方法: 使用a标签,添加download属性,然后让用户设置浏览器-高级-每次下载前询问另存为

  • 相关阅读:
    DBUtils温习2
    DBUtils温习1
    C3P0连接池温习1
    JDBC复习2
    JDBC复习1
    Spring的AOP基于AspectJ的注解方式开发3
    Spring的AOP基于AspectJ的注解方式开发2
    Spring的AOP基于AspectJ的注解方式开发1
    高血压认知3
    pandas cookbook
  • 原文地址:https://www.cnblogs.com/sugartang/p/13778198.html
Copyright © 2011-2022 走看看