项目实战day5

ゞ浴缸里的玫瑰 2022-12-31 14:21 111阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  1.分页
 *  2.全局过滤器封装
 *  3.下载docx文件的处理

--------------------

# 1.分页 #

<div class="block pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo" :page-sizes="[5, 10, 15, 20]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="rows" ></el-pagination>
        </div>

// 处理分页
        //页码的改变
        handleSizeChange(val = this.listQuery.pageSize) { 
          this.listQuery.pageSize = val;
          this.getList();
        },
        //当前页的改变
        handleCurrentChange(val = this.listQuery.pageNo) { 
          this.listQuery.pageNo = val;
          this.getList();
        },

# 2.全局过滤器封装 #

//filters.js
    export function getDate(data) { 
        var d = new Date(data);
        var times =
            d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
        return times;
    }

//index.js
    import Vue from 'vue';
    import * as filters from './filters'  //引入filters对象(所有的)
    
    
    console.log(filters);
    // getDate: ƒ getDate(data)
    Object.keys(filters).forEach(key => { 
        Vue.filter(key, filters[key]);
    })

// 引入全局过滤器
    import './filters/index'

# 3.下载docx文件的处理 #

因为后端给的是一个地址,所以需要发送请求拿到我们所需的数据

//下载docx合同
        downloadDocx(url) { 
          // 发送请求字节流数据
          var xhr = new XMLHttpRequest();
          xhr.open("get", url);
          xhr.responseType = "blob"; //请求类型 字节流
          xhr.setRequestHeader("token", getToken());
          xhr.send(); //发送请求
          xhr.onreadystatechange = () => { 
            if (xhr.status === 200 && xhr.readyState === 4) { 
              console.log(xhr.response);
              var filename = xhr.responseURL.substring(
                xhr.responseURL.lastIndexOf("/") + 1
              );
              this.saveAs(filename, xhr.response);
            }
          };
        },

a标签进行下载

//创建a标签进行下载
        saveAs(name, data) { 
          //文件名, 数据
          var urlObject = window.URL; //window对象的URL对象是专门用来将blob或者file读取成一个url的。
          var export_blob = new Blob([data]); //代表二进制类型的大对象,就是Blob对象是二进制数据
          // <a href="12345.jpg" download="名称" >
          var a = document.createElement("a"); //创建a标签
          a.href = urlObject.createObjectURL(export_blob); //通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
          //download是 HTML5 中<a>标签新增的一个属性，此属性会强制触发下载操作，指示浏览器下载 URL 而不是导航到它，并提示用户将其保存为本地文件
          a.download = name;
          a.click(); //触发a标签单击
        }