vue点击导出按钮为撒不下载_vue 中上传文件下载文件按钮

const tbit = require('../tbit')

// const filebtn = require("./filebtn")

import filebtn from "./control/filebtn"

import pager from "./control/pager.vue"

export default {

mounted:function (){

var me = this

// this.a()

this.admin = localStorage.username

this.query()

},

components:{

"filebtn":filebtn,

"pager":pager

},

methods:{

query(){

this.internalquery(this.search || "",this.page||1)

},

async internalquery(search,page){

var me = this

this.page = page

var query = `{user_list(page:${this.page},id:"${search}"){id,username,address,telephone,email,time,OnuId,ONUname,plan,TariffPackageId,actualtime}}`

var response = await tbit.ql(query)

this.items = response.data.data.user_list

query = `{user_pages(search:"${search}")}`

var response = await tbit.ql(query)

this.pages = response.data.data.user_pages

},

//导出

async doExport(){

var query = `{download_user{filename,mimetype,content}}`

let response = await tbit.ql(query)

let filename = response.data.data.download_user.filename;

let content = response.data.data.download_user.content;

this.downloadFile(filename, content);

},

downloadFile: function(fileName, content) {

const blob = this.base64ToBlob(content); // new Blob([content]);

if (window.navigator.msSaveOrOpenBlob) {

navigator.msSaveBlob(blob, fileName);

} else {

const link = document.createElement("a");

link.href = window.URL.createObjectURL(blob);

link.download = fileName;

//此写法兼容可火狐浏览器

document.body.appendChild(link);

const evt = document.createEvent("MouseEvents");

evt.initEvent("click", false, false);

link.dispatchEvent(evt);

document.body.removeChild(link);

}

},

base64ToBlob: function(code) {

const parts = code.split(";base64,");

const contentType = parts[0].split(":")[1];

const raw = window.atob(parts[1]);

const rawLength = raw.length;

const uInt8Array = new Uint8Array(rawLength);

for (let i = 0; i < rawLength; ++i) {

uInt8Array[i] = raw.charCodeAt(i);

}

return new Blob([uInt8Array], { type: contentType });

},

closeUploadModal:function() {

let modal = document.getElementById("UploadModal");

modal.classList.remove("is-active");

},

doImport:function() {

if(confirm('Whether or not to import users')==true){

let modal = document.getElementById("UploadModal");

modal.classList.add("is-active");

}

},

//导入

handlerUpload: async function(e) {

//获取选定的文件

var self = this

let tFiles = e.target.files;

let len = tFiles.length;

if (len != 1) {

alert(this.$i18n.t("Only one file can be uploaded"));

return;

}

//将文件转base64

let reader = new FileReader();

reader.readAsDataURL(tFiles[0]);

reader.onload = async function(e) {

let query = `mutation{upload_user(fileContent:"${this.result}")}`;

let response = await tbit.ql(query);

if (response.data.data.upload_user == true) {

alert("success");

let model = document.getElementById("UploadModal");

model.classList.remove("is-active");

document.getElementById("file").value='';

await self.query()

} else {

alert("upload file fail");

document.getElementById("file").value='';

}

};

},

},

data:function (){

return {items:this.items,pages:1,page:1,search:"",money:this.money,username:"",actualincome:"",createdAt:"",address:"",telephone:"",admin:"",refundtime:""}

}

}

title

{{$t("Upload configuration")}}

{{$t("Click for upload a file")}}

.uploadBox {

width: 400px;

border: 1px solid #ccc;

margin: 100px auto;

}

.fileBox,

.fileInfo {

margin: 16px;

height: 60px;

line-height: 60px;

border: 1px solid #ccc;

padding-left: 16px;

font-size: 16px;

}

.inputfile {

width: 0.1px;

height: 0.1px;

opacity: 0;

overflow: hidden;

position: absolute;

z-index: -1;

}

/*E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F*/

.inputfile+label {

color: #3e97df;

display: inline-block;

}

.inputfile:focus+label,

.inputfile+label:hover {

color: #0c89f0;

cursor: pointer;

}

h3 {

padding: 10px 0 0 16px;

font-weight: normal;

font-size: 18px;

color: #666;

}

.filePart {

line-height: 30px;

overflow: hidden;

float: left;

text-overflow: ellipsis;

white-space: nowrap;

font-size: 12px;

height: 30px;

}

.fileStatus {

overflow: hidden;

float: left;

height: 20px;

font-size: 10px;

line-height: 20px;

}

.ml10 {

margin-left: 10px;

}

.fileName {

width: 200px;

}

.fileSize {

width: 120px;

text-align: center;

}

.uploadFail {

color: #ff0800d3;

}

.uploadSuccess {

color: #2c832c;

}

/*对应CSS*/

.progress {

position: relative;

width: 80%;

height: 8px;

border: 1px solid #ccc;

border-radius: 5px;

overflow: hidden;

/*注意这里*/

box-shadow: 0 0 1px 0px #ddd inset;

}

.progress span {

position: absolute;

display: inline-block;

width: 10%;

height: 100%;

background-color: #3e97df;

}