首页 > 其他分享 >Vue下载excel文件模板

Vue下载excel文件模板

时间:2022-09-27 11:57:50浏览次数:49  
标签:xlsx Vue 文件 excel static document 模板

注意:

1.模板一定是英文名

2.使用相对于index.html的路径

3.a标签同理

<a href="./static/template.xlsx" download="模板.xlsx"></a>

第一步:

 vue2.0版本的在项目根目录下的static文件夹,放入“文件模板.xlsx”文件。

 vue3.0版本的在项目public目录下新建static文件夹,放入“文件模板.xlsx”文件。

第二步:

  在按钮中加入事件

  <el-button icon="el-icon-download" size="medium" @click="downloadTemplate">模板下载</el-button>

第三步:

在 methods中写入如下方法:

downloadTemplate() {
            let a = document.createElement('a')
            a.href = './static/template.xlsx'
            a.download = '文件模板.xlsx'
            a.style.display = 'none'
            document.body.appendChild(a)
            a.click()
            a.remove()
        },

 

标签:xlsx,Vue,文件,excel,static,document,模板
From: https://www.cnblogs.com/wwll2020/p/16734052.html

相关文章

  • C++模板的哲学
    2.5模板C++的模板一直是这门语言的一种特殊的艺术,模板甚至可以独立作为一门新的语言来进行使用。模板的哲学在于将一切能够在编译期处理的问题丢到编译期进行处理,仅在运......
  • vue学习笔记(七):路由
    Vue是单页面的网页程序,只有一个页面,页面中的不同的部分会被替换成不同的组件的内容根据不同的浏览器路径替换不同的组件内容要建立路径和视图之间的关系,即是路由!静态导入,......
  • 简单上手 Vue Router
    VueRouter也随着Vue3的更新来到了4版本,来看一下怎么使用吧!(这里使用的是compositionAPI和TypeScript模式)安装vue-router4npminstallvue-router@4在/src......
  • U8导excel会计科目表时常用excel公式
    凭证号补0添加4位长度的凭证号如:0001公式:=TEXT(A1,"0000")科目编码长度不够补位0给5到6级科目编码补0=LEFT(A1,12)&0&RIGHT(A1,1)公式:长度为11和13的补位0=IF......
  • Vue+Echarts--父组件+子组件(基础)
    基本的思路就是:在父组件获取后端数据,然后传到子组件,子组件创建图表进行展示。1、获取后端数据 2、将数据传给子组件,并将子组件引入到父组件  3、子组件接收数......
  • vscode运行vue项目(vscode插件安装)
    vetureslinAutoCloseTagAutoRenameTagDebuggerforChromeopeninbrowserJavaScript(ES6)codesnippetsPathIntellisenseBracketPairColorizerBetterC......
  • 界面组件DevExpress WinForms v22.1 - 全新升级的HTML CSS 模板
    DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office......
  • shopify capital主题模板配置修改
    shopifycapital主题有风格和精确地展示产品,这个主题非常适合编辑内容,优化了更长的文本部分,以支持品牌的故事叙述;高容量商店,专为在特定时期处理大量交易的商店设计  ......
  • vue学习笔记(六):EL组件库学习
    安装Element-uinpmielement-ui在main.js中插入引用项importElementfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'在newVue之前插入引用......
  • Vue3之script-setup全面解析(转载)
    可能很多同学(包括我)刚上手Vue3.0之后,都会觉得开发过程似乎变得更繁琐了,Vue官方团队当然不会无视群众的呼声,如果你基于脚手架和.vue文件开发,那么可以享受到更高效率......