美文网首页
js保存文件

js保存文件

作者: 利312 | 来源:发表于2017-02-13 17:02 被阅读421次

以前保存文件有用openwindow,之后调用execCommand('SaveAs',true,'filename.ext');,貌似试了下,不太好用了,h5添加一个很小的改动,对a标签添加了download属性(可以为文件名);
简单实用如下: demo

<a href="javascript:void(0);" download="data.csv" id="export">点击导出csv</a>
    <button id="btn">测试点击自动生成a标签下载</button>
    <script>
    document.getElementById('export').addEventListener('click',function(e) {
      console.log(e)
      var csvData = 'a,bc,d,e,f,g';
      csvData = 'data:application/csv;charset=utf-8,' + csvData;
      this.setAttribute('href',csvData);
      this.setAttribute('target','_blank');
    },false);
    // triggerClick(document.getElementById('export'));
    // windowSave();
    function triggerClick(node){
        if (document.createEvent) {
            var evt = document.createEvent('MouseEvents');
            evt.initEvent('click', true, false);
            node.dispatchEvent(evt);
        } else if (document.createEventObject) {
            node.fireEvent('onclick') ;
        } else if (typeof node.onclick == 'function') {
            node.onclick();
        }
    }
    document.getElementById('btn').addEventListener('click',function() {
      var a = document.createElement('a');
      var csvData = 'a,bc,d,e,f,g';
      csvData = 'data:application/csv;charset=utf-8,' + csvData;
      a.setAttribute('href',csvData);
      a.setAttribute('target','_blank');
      a.setAttribute('download','test.csv');
      triggerClick(a);
    },true);
    </script>

相关文章

  • js保存文件

    js保存文件

  • js保存文件

    以前保存文件有用openwindow,之后调用execCommand('SaveAs',true,'filenam...

  • 什么是css和js

    JS代码就是JavaScript编写的脚本文件的代码。用单独文件保存,扩展名为.JS JS即Javascript,...

  • mpvue使用vuex进行状态管理-基本使用

    1:新建store文件夹,用来保存.js文件 2:index.js中的内容 import Vuefrom 'vue...

  • Vue 常用库

    JS file-saver 保存文件到硬盘 { autoBom: true }时 FileSaver.js 将自动...

  • Node学习(2)

    脚本模式 console.log("Hello World");保存该文件,文件名为 helloworld.js,...

  • asp Ueditor增加图片水印

    1、找到:ueditor\ueditor.config.js文件: //启用自动保存enableAutoSave:...

  • H5 导出文件的解决办法

    FileSaver.js可以实现前端导出文件的需求。 使用方法: 1.保存文件 2.保存图片 reacrt引入方式...

  • js 文件保存下载

    ajax下载文件下载文件最简单的是用get方法配合前端的a标签,但是如果是post方法或者是请求需要加头信息就需要...

  • node 自动重启服务器

    js 文件修改保存后node服务器自动重启npm install --global nodemon

网友评论

      本文标题:js保存文件

      本文链接:https://www.haomeiwen.com/subject/wsqtwttx.html