下载本地静态资源static文件夹

下载静态文件方法

 <a href="/static/serviceAgreement.docx" rel="external nofollow"  rel="external nofollow"  download="下载"></a>

下载

项目需要下载本地的docx文档,文档是放在本地的没有在服务器,所以需要下载本地静态资源文件,开始把文件放在了这里src目录下的assets资源文件下

下载报错 找不到文件路径查找原因是因为项目用的是vue-cli3, 在打包的时候并不知道会把assets

下的文件打包在哪里,但是在build的时候发现在根目录下的文件是打包在当前路径下的

所以我们要把需要下载的静态资源放在public文件夹下的static文件夹下就可以了

你可能在输入路径的时候会提示你是src,而不直接是static,但是你还是要直接输入static这个路径

<a href="/static/serviceAgreement.docx" rel="external nofollow"  rel="external nofollow"  download="服务协议"></a>

需要注意的是:cli2需要把要下载的文件放在static下面;cli4需要将文件放在public里面才不会被打包。

注意:href 指向项目中pdf文件的路径(不要出现中文),download 就是重命名的文件名,不设置的话就是默认文件名

发现vue版本是 3.0 所有把要下载的 文件直接放到public文件夹中(最好英文名字)

下载本地static静态文件的踩坑

未发现文件

接手了一个别人做的官网项目,里面添加一些功能,国际化(国际化);接着有一个下载的功能,一般都是后端甩一个链接你放上面就好,但是这个小功能再去找一个后端搞,太夸张了吧,那我们就自己搞!

方法当然是非常多的,但是我试了几种,总是会报一个错误;“未发现文件”,还有的时候就是:房子同一个地址下面;非压缩包的文件可以正常下载,但是压缩包就不能下载;

上代码

最简单的就是利用a标签

<el-button round
><a href="/xlsx/test.xlsx" rel="external nofollow"  download="大赛报名表.xlsx"
  >报名参赛</a
></el-button>

会有人疑问路径是不是不对,

一般访问static里面的文件路径是:"…/…/static/zip/test.xlsx"

我开始也是这样写的,一直报错”未找到文件“,

后来看了cli版本,发现是cli4有一些变化,改成代码中的路径就可以了;

还有一个问题就是相同路径,普通文件可以下载,但是压缩包无法下载,(我试验过把压缩包和普通文件放到同一个路路径下依然有问题);

这个时候我们就不要在html里面去操作他了;给他一个点击事件

上代码

html

<el-button @click="download">
题目下载
</el-button>

script

methods: {
    download() {
      window.location.href = "/zip/subject.zip";
    },
  },

两个文件的路径

文件路径

做一下记录,以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。

Vue如何下载本地静态资源static文件夹的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. Swift:实例方法和类型方法

    大家对“实例方法和类型方法”的概念应该不陌生了,在objective-c中很常见。例如:1.实例方法调用的时候,必须先进行实例化一个对象,然后调用init方法。而在Swift中写法有所改变,它使用class和static关键字来标示。

  3. Swift开发必备技巧:static和class的使用

    Swift中表示“类型范围作用域”这一概念有两个不同的关键字,它们分别是static和class。但是在Swift中,这两个关键字却是不能用混的。在非class的类型上下文中,我们统一使用static来描述类型作用域。这包括在enum和struct中表述类型方法和类型属性时。static适用的场景有这些:enum的情况与这个十分类似,就不再列举了。在Swift中class、struct和enum都是可以实现protocol的。

  4. OC和Swift中的static

    在非class的类型上下文中,我们统一使用static来描述类型作用域,class关键字是专门用在class类型的上下文中的,可以用来修饰类方法以及类的计算属性。Swift1.2之后,类也可以通过static关键字拥有类型存储属性了,static相当于classfinal标识符的别名,类中的static属性拥有全局作用域和懒加载属性。

  5. swift的静态属性(方法)和java的不同

    swift在任何情况下静态属性都要加上类名做为前缀,在java中通过实例名使用静态属性是一个warning,在swift中这里是一个错误swift中的static属性===swift中的finalclass====java中的finalstaticswift多出了class属性这个概念,用来表示`可以被子类重写的static属性`,然并卵,我觉得不如直接使用static和finalstatic,少一种概念swift中子类不能覆盖父类的storedproperty,但是可以覆盖父类的computedprop

  6. JokeClient-Swift 仿写学习

    STATIC和CLASSSwift中表示“类型范围作用域”这一概念有两个不同的关键字,它们分别是static和class。在Swift中class,struct和enum都是可以实现某个protocol的。在Swift中编译器不仅不会对AnyObject实例的方法调用做出检查,甚至对于AnyObject的所有方法调用都会返回Optional的结果。摘自:ANY和ANYOBJECTSELECTOR在Swift中没有@selector了,取而代之,从Swift2.2开始我们使用#selector来从暴露给Ob

  7. Swift 学习笔记 [2] 类 结构体 枚举

    错误处理四种错误处理方法传播给调用该函数的代码funcprocesFn()throwtryprocessFn()docatch捕获do{tryexpression}catchpattern1{}catchpattern2{}将错误转成可选值funcprocessFn()throw->Int{}lettry?processFn()defer定义:defer定义的函数内,在此函数完成后,立即再次调用defer定义的代码块。无关的话学了还是要用,第一版Swift文档出来的时候,还凑热闹学了一次,现在都忘得差不多

  8. 在Swift中使用dispatch_once单例模型

    到目前为止,我已经能够得到一个非线程安全模型:在Static结构中包含单例实例应该允许单个实例与单例实例没有冲突,没有复杂的命名模式,它应该使事情相当私密。根据我对Swift的经验,有三种方法来实现支持延迟初始化和线程安全的Singleton模式。dispatch_once传统的Objective-C方法移植到Swift。

  9. Swift中的static func和class func有什么区别?

    我可以在Swift库中看到这些定义:定义为staticfunc的成员函数和定义为func类的另一个函数之间有什么区别?是简单的静态是结构和枚举的静态函数,类和协议的类?有什么其他差别,应该知道吗?在语法本身中有这种区别的理由是什么?一些其他的区别是类函数是动态分派的,可以被子类覆盖。为协议选择了类,因此不必有第三个关键字来表示静态或类。

  10. “dispatch_once_t”在Swift中不可用:使用懒惰初始化的全局变量

    }()_=myGlobal//usingmyGlobalwillinvoketheinitializationcodeonlythefirsttimeitisused.所以我想迁移这个代码.所以在迁移之前:迁移后,按照Apple的指南,代码如下所示:但是当我运行这个访问返回时,我得到以下错误Static.instance!即使Swift2中有效,该代码过于冗长.在Swift3中,Apple强制您通过关闭来使用延迟初始化:

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部