Vue2 实现静态资源下载

介绍

Vue2 脚手架实现静态资源(本地)下载

什么是Vue的静态资源

• 在Vue cli脚手架中 会提供两个资源目录

  • assets编译资源 他会被webpack进行编译处理 适合放一些经常要替换或者Vue模板中使用的图片等资源

  

  • public (opens new window) 非编译静态加载 不会被webpack进行编译处理 需要和当前Vue cli环境变量process.env.BASE_URL (opens new window)进行绝对路径的拼接 并且不可以使用相对路径 适合放一些下载模板xls,doc等 不经常替换的资源

下载静态资源

• 通过<a>标签实现下载静态资源
• xxxxxxxxxx /** * @type {formName} String * @type {obj} any * @example 表单数据(消除表单验证提示) this.$resetForm('绑定form表单的ref', this.你要重置的数据域) * @example 普通数据 this.$resetForm('', this.你要重置的数据域) */// formName: 表单的ref属性 obj表单的数据域export default function resetForm (formName, obj) {    // 清空表单    if (this.$refs[formName]) {        this.$refs[formName].resetFields()   }    // 清空数据域    Object.keys(obj).forEach(key => {        obj[key] = ''   })}​// main.js 入口文件注册// 清空表单import resetForm from '@/utils/resrtForm'Vue.prototype.$resetForm = resetFormjs

第一步 封装下载静态资源 js方法

• 下载public静态资源 一定要和当前Vue cli环境变量process.env.BASE_URL (opens new window)进行绝对路径的拼接 不拼接会跳转页面 而非下载
• png, jpg, mp4或者pdf 这种在浏览器可以预览(Window.open() (opens new window))的文件 通过该方法也会取消预览 直接进行下载
• 文件名称必须携带扩展名 否则会无法下载

/**
 * @author 刘凯利
 * @function 下载本地资源文件
 * @param {Object} obj 下载全部参数
 * @param {String} obj.file `file ` 文件全称包含文件扩展名(要写扩展名!)
 * @param {String} obj.fileName `fileName` 下载下来的文件名称（自定义）
 * @param {Boolean} obj.local `local` 判断是否本地资源
 */
// 判断当前脚手架环境
const prefixUrl = process.env.NODE_ENV === 'production' ? '/test/' : '/'
export default function downloadLocalFile (fileValue) {
  const { file, fileName } = fileValue
  const a = document.createElement('a')
  // 路径中'/'为根目录，即index.html所在的目录
  a.href = prefixUrl + 'upload/' + file
  // 下载下来的文件名
  a.download = fileName
  // 添加点击
  a.click()
}

第二步 在入口文件main.js 进行Vue原型链注册

// 注册本地下载
import uploadFile from '@/utils/upload'
Vue.prototype.$upload = uploadFile

第三步 在Vue中使用

    this.$upload({
        // 文件全称包含文件扩展名(要写扩展名!)
        file: 'partstemplate.xlsx',
        // 下载下来的文件名称（自定义）
        fileName: '零件模板'
      })