下载,导出,储存在localStorage

这篇博客介绍了如何使用localStorage存储对象,并通过a标签的download属性实现文件下载。内容包括:1) 将对象存储在localStorage,2) 使用download属性直接赋值URL或通过接口获取下载URL,3) 实现下载功能,4) 防止对象赋值时改变原始对象,以及JSON.stringify()和JSON.parse()的使用场景。
摘要由CSDN通过智能技术生成

let s=JSON.parse(JSON.stringify({}))

1. 将对象储存在localStorage

1.1 将params对象储存在SET_QUERY_FORM变量里面

localStorage.setItem('SET_QUERY_FORM', JSON.stringify(params))

1.2将储存在SET_QUERY_FORM变量里的params对象拿出来
FORM 就是之前储存的数据

const FORM = JSON.parse(localStorage.getItem('SET_QUERY_FORM'))

2.通过a标签,download属性,进行下载

2.1 直接赋值url

<a :href="urlhref" download><span style="display:inline-block;cursor:pointer;" class="el-icon-download" @click="templateDownload"></span> </a>
 templateDownload() {
      let res = this.$refs.tree.getCheckedNodes(false, true);// 获取勾选的所有关联节点(所有的半选节点也一并获取)
      if (res == 0) {
        return this.$message.error("不可以传空表头");
      }
      let arr = [];
      res.forEach((item) => {//剔除掉不想要展示label值,将label值存在数组中
        if (
          item.label == "全选" ||item.label == "案件基本信息"
        ) {
        } else {
          arr.push(item.label);
        }
      });
      const FORM = JSON.parse(localStorage.getItem('SET_QUERY_FORM'))
      delete FORM.Num//去掉不想要的字段
      if (arr.length == 33||arr.length>0) {
        FORM.titleList = arr.join(",");
      }
      this.urlhref = global.lawRisk + "/legalCases/Export";
      let number=0;
      for (let key in FORM) {
        if(FORM[key].length!=0){
          if(key!="comName"){
            if(number==0){//第一个加?
            this.urlhref +="?"+ key + "=" + FORM[key];
            }else{
              this.urlhref += "&" + key + "=" + FORM[key];
            }
          number++;
          }
        }
      }
      console.log("this.urlhref", this.urlhref);//最终拼接的地址

    },

2. 通过调接口得到需要下载的url

<a id="a3333" >
     <!--:href="urlhref" download -->
     <span style="cursor:pointer" v-for=" (item,index) in scope.row.appendId " :key="index" @click="appendIdDownLoad(item,'a3333')">{{index!=0?",":""}} {{item.name}}</span>
</a>

appendIdDownLoad(row, val) {
      let params = {
        url: row.url
      }
      console.log("val", val);
      downFile(params)
        .then((res) => {
          console.log('res', res)
          //通过dom操作,给a标签添加href,download属性 ,并进行点击
          document.getElementById(val).href=res.data
          document.getElementById(val).download=true
          document.getElementById(val).click()
          console.log("this.urlhref",document.getElementById(val));
        })
        .catch((err) => {
        });

    },

3. 下载

     let downloadUrl ="";
      const link = document.createElement("a");
      link.style.display = "none";
      link.href = downloadUrl;
      link.setAttribute("download", "操作日志信息" + ".xls");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

4.将对象赋值给另一个对象,直接赋值可能会更改原来得对象

JSON.stringify()方法用于将一个值转为JSON字符串,该字符串符合JSON格式,并且可以被JSON.parse()方法还原

4.1 JSON.parse(JSON.stringify({}))

let s=JSON.parse(JSON.stringify({}))
let list=[...list]

4.2如果发现有些循环没其作用,

(1)加:key="id+'m'"
(2).父亲给子组件传值,没有传过去得话,绑定一下:key="number"

(1):key="'X'+Xindex"
(2).this.Xindex = Math.random().toString(36).substr(2).toLocaleUpperCase()

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值