前端实现模板/文件下载

将文件模板放置于public下,不建议用中文

在src目录下新建utils文件夹,写入js文件,代码如下:

/**
 * 下载模板
 * @param {*} file 文件全称包含文件扩展名
 * @param {*} fileName  下载下来的文件名称(自定义)
 * 注意,静态文件需放在public目录下,上线时需修改地址
 * vue2需要放在public下的static文件夹下,否则上线后找不到文件无法下载
 * a.href = '/static/' + file
 */
export function downloadLocalFile(file, fileName) {
  const a = document.createElement('a') // 创建一个<a></a>标签
  a.href = '/' + file // 给a标签的href属性值加上地址,注意,这里是绝对路径,不用加点.====>'/'表示public目录下
  a.download = fileName // 设置下载文件名,这里加上.docx指定文件类型,.xlsx指定文件类型,pdf文件就指定.fpd即可
  a.style.display = 'none'// 障眼法藏起来a标签
  document.body.appendChild(a)// 将a标签追加到文档对象中
  a.click()// 模拟点击了a标签,会触发a标签的href读取,浏览器会自动下载
  a.remove()// 一次性的,用完就删除a标签
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值