1. Q：a 标签下载文件
A:
<a
class="download small-hand"
:href=linkConf
download="template_1544007466.xlsx"
>
下载模板
</a>
linkConf:linkConfig.getHost()+"/example/bn_card_grant.xlsx"
2.Q:input file 文件上传
A:
布局：html
<a href="#" class="update_logo small-hand">编辑logo</a>
<input
type="file"
name="upload_logo_img"
class="upload_img small-hand"
ref="inputer"
@change="changepic($event)"
accept="image/png,image/jpeg,image/gif,image/jpg"
id="logo-input"
>
css:
.upload_logo>.upload_img {
width: 138px;
height: 30px;
position: relative;
bottom: 20px;
z-index: 100;
opacity: 0;
}
js:
changepic(){
let inputDOM = this.$refs.inputer;// 通过DOM取文件数据
let fileObj = inputDOM.files[0];//获取文件信息
let size = '',format = '',index;
if(fileObj){
index = fileObj.name.lastIndexOf(".");
format = fileObj.name.substring(index+1);
size = (fileObj.size / (1024 * 1024)).toFixed(2);
}
if(format != 'jpg' && format != 'png'){
this.$toast('格式不正确，请重新上传',this.toastType)
return;
}
if(size > 1){
this.$toast('请选择不大于1M的图片',this.toastType)
document.getElementById('logo-input').value = ""
return;
}
var reader = new FileReader();
reader.readAsDataURL(fileObj); // 读出 base64
let that = this;
reader.onloadend = function () {
//图片的 base64 格式, 可以直接当成 img 的 src 属性值
that.uplpadImg = reader.result;
}
let fileInfo = {
imageFile:fileObj,
xxx:xxx\
}
this.$uploadFile('xxxxx',fileInfo,this).then((response)=>{
})
},
3.Q:js下载文件兼容各种浏览器
A:
chrome、火狐、360都可以
downloadIamge(imgsrc, name) {//下载图片地址和图片名
var image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
},
IE浏览器图片保存本地
SaveAs5(imgURL){
var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000");
for(; oPop.document.readyState != "complete"; )
{
if (oPop.document.readyState == "complete")break;
}
oPop.document.execCommand("SaveAs");
oPop.close();
},
