vue项目中下载静态资源里的pdf文件

写vue项目时,常常会有提供给用户下载的pdf文件,当这些文件不是从服务器上请求回来的,而是放在vue项目的静态资源中,此时按照常规使用a标签,将出现如下的问题

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


vue项目使用a标签下载静态资源assets里的文件

然后点击这些说明书,就会发现下载失败


怎么办?有2个办法

  • 方法一:把pdf放入public文件夹中

XX使用说明书
XX设备APP使用说明书

但是pdf会放在在打包的根目录里


打包的根目录
  • 方法二:require引入
    1. 在data中先引入这些静态文件
    export default {
      name: "adminInfo"
      data() {
        return {
          pdf1: require('../../assets/files/20200701101925.pdf'),
          pdf2: require('../../assets/files/20200701101937.pdf')
      }
    }
    
    1. 然后 href 动态绑定
    国际扑克赛事运营管理平台使用说明书
    裁判手持设备APP使用说明书
    1. 不出意外的话,这样写会报错!!!因为还需要在vue.config.js中配置
      vue.config.js

你可能感兴趣的:(vue项目中下载静态资源里的pdf文件)