Element UI 中关于静态图片的浏览和文件的下载

文章介绍了如何在前端展示图片,通过`window.open`结合图片路径实现。同时,文章详细讲解了文件下载的方法,利用HTML的`<a>`标签,配合阿里云OSS的文件链接,设置`download`属性实现文件下载,特别指出本地服务器可能存在的问题。
摘要由CSDN通过智能技术生成

一 图片浏览

1 图片文件位置

2 代码

handleCreditReportQueryResult(row) {
  window.open(require("@/assets/images/img_13.png"))
},

二 文件下载

1 说明

将文件放在文件服务器上,通过前端直接下载。

2 代码

handleCreditReportResultDownload() {
  var a = document.createElement("a"); //创建一个<a></a>标签
  a.href = "https://gulimall-cakin.oss-cn-chengdu.aliyuncs.com/20230310/企业信用报告.docx"; // 给a标签的href属性值加上地址,注意,这里是绝对路径,不用加 点.
  a.download = "企业信用报告.docx"; // he设置下载文件文件名,这里加上.xlsx指定文件类型,pdf文件就指定.fpd即可
  a.style.display = "none"; // 障眼法藏起来a标签
  document.body.appendChild(a); // 将a标签追加到文档对象中
  a.click(); // 模拟点击了a标签,会触发a标签的href的读取,浏览器就会自动下载了
  a.remove(); // 一次性的,用完就删除a标签
},

3 注意

若放在本地静态服务器目录,服务器加载会失败。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值