精华内容
下载资源
问答
  • vue 下载本地文件

    千次阅读 2020-04-29 15:16:25
    有时,我们需在在前端项目中下载本地某个地址的文件模块,这个文件不想放在后端去下载。所以,在这个文件大小不是太大的情况下,我们可以把文件放在前端项目目录中,这样不管开发环境还是生产环境,都能在同样的路径...

    情景描述:

    有时,我们需在在前端项目中下载本地某个地址的文件模块,这个文件不想放在后端去下载。所以,在这个文件大小不是太大的情况下,我们可以把文件放在前端项目目录中,这样不管开发环境还是生产环境,都能在同样的路径下找到那个文件。

     

    实现:

    1. 先得把文件放在项目工程目录下的某个路径下,这个路径不管是开发环境还是打包之后在生产环境,都是一样的。在vue-cli 3.x+的版本中,这个文件夹叫public:

    把需要下载的文件放在public目录下,打包之后,public目录下的所有文件会直接拷贝到dist目录中。

    2. 定义文件下载地址

    downloadUrl: `${process.env.BASE_URL}fileResources/template.xlsx`, // 模板下载文件地址

    这个地址是由process.env.BASE_URL和public下待下载文件的路劲拼一起来的,其中process.env.BASE_URL是从环境进程中根据运行环境获取的,这样才能不管在开发环境还是生产环境,都能拿到对应的下载地址。

    3.点击a标签直接打开下载地址,下载文件到本地默认下载路径。

    <a :href="downloadUrl" download="personnelImportTemplate.xlsx" style="color: #FF0000; text-decoration: underline">{{ $t('modal.template') }}</a>

    download的值要和待下载文件名一样,包括文件后缀名。

     

    ===》END

    欢迎交流~

    展开全文
  • 标题使用脚手架创建的项目,下载文件时用a标签的话,转跳的页面路由会被vue-router强行改掉,根本无法下载文件。我也是一点一点的修改才使用了iframe的方法去跳过它。 以下所有的路径都要根据自己的项目来配置 ...

    使用脚手架创建的项目,下载文件时用a标签的话,转跳的页面路由会被vue-router强行改掉,根本无法下载文件。我也是一点一点的修改才使用了iframe的方法去跳过它。

    以下所有的路径都要根据自己的项目来配置,如果你不是用ElementUI,你就直接在方法里面用JS代码去创建<iframe>标签,并且去设置style以及src属性,这几个是最重要的

    点击部分代码
    在这里插入图片描述
    执行的方法

    //下载
    download(row) {
       let downloadFileUrl = this.$http.defaults.baseURL + "model/download/" + row.modelUrl; //自己的路径
       this.$notify({
         title: `下载的文件是: ${row.name} `,
         type: "success",
         dangerouslyUseHTMLString: true,
         duration: 3000,
         offset: 60,
         //主要是这句,通过ifranme跳过路由标记,这样页面就能自动跳出下载的弹窗了
         message: `<iframe src='${downloadFileUrl}' style="display:none"></iframe>`
       });
     },
    

    后端node代码

    //文件下载
    router.get('/model/download/:fileName', async (request, response) => {
        response.download('uploads\\'+request.params.fileName) //按照你自己的静态目录来设置
    });
    
    展开全文
  • 这个是需要将会使用到的 不改变的东西下载下来给用户看,比如某个模板文件,只有文件格式类的东西 ...文件下载</a> 这里使用a标签直接下载,downloadUrl 是文件的路径,download内存放文件名...

    2020.11.13更新

    发现自己这么写很麻烦,在文件少的情况下,可以直接将文件放入public文件夹内,

    <a :href="aaaaa.xlsx" download="xxx项目列表.xlsx">文件下载</a>

    这里的 aaaaa.xlsx是public内的文件,download的内容是可以作为自己下载的文件名,

    这两个名称可以一致也可以不一致,最后这个下载下来的文件名是download内填写的文件名。

    这个不用写单独的url,简单方便。

     

     

    原内容:

    这个是需要将会使用到的 不改变的东西下载下来给用户看,比如某个模板文件,只有文件格式类的东西

    因为vue打包后的文件路径与现在不一致,所以需要把文件存放在public文件夹内,才能保证打包后路径不会改变

    看代码:

    <a :href="url.downloadUrl" download="1test.xlsx">文件下载</a>

    这里使用a标签直接下载,downloadUrl 是文件的路径,download内存放文件名

     

    这里的路径downloadUrl在data里面放置,

    url: {
    	downloadUrl: '/file/1test.xlsx',
    },

    基本是这样的,已经测试过了,如有问题或补充欢迎留言!

    展开全文
  • vue下载本地pdf文件

    千次阅读 2020-02-19 14:03:08
    Vue下载本地pdf文件 html: <button @click="downloadPDf">downloadPDf</button> js: downloadPDf() { axios.post('http://localhost:8080/static/test....

    Vue下载本地pdf文件

    html:

    <button @click="downloadPDf">downloadPDf</button>
     

    js:

    
     
    1. downloadPDf() {
    2. axios.post( 'http://localhost:8080/static/test.pdf', {
    3. responseType: 'blob', //重要
    4. }).then( response => {
    5. const url = window.URL.createObjectURL( new Blob([response.data]));
    6. const link = document.createElement( 'a');
    7. let fname = 'report.pdf';
    8. link.href = url;
    9. link.setAttribute( 'download', fname);
    10. document.body.appendChild(link);
    11. link.click();
    12. })
    13. }
    14. }

    记住本地文件一定要放在static文件夹下面。

    展开全文
  • vue 下载pdf文件

    千次阅读 2019-11-19 16:57:10
    首先安装依赖 npm install html2canvas jspdf --save 封装方法: // pdfMethod.js ...点这里下载 ...这里用class类名包裹的所有html样式都会按照vue展现的样式被canvas绘出来并以pdf文件输出
  • vue 选择本地文件目录

    万次阅读 热门讨论 2020-10-15 15:12:09
    vue 选择本地文件目录先看效果原码片断 通过的vue结合原生的input 进行本地文件系统目录的选择 先看效果 传统的文件处理会有一些文件上传相关的插件,但有时候会有一些需求是不能简单选择一个文件上传就能解决的...
  • vue下载文件本地

    千次阅读 2019-04-17 17:46:29
    在我们写项目的时候经常会遇到下载图片、下载表格的操作, 传入的data是后台返回的二进制流,name是要下载的图片名称,可以跟后台商量一下name在什么地方拿,比如response里返回headers的一个字段 我们正常使用axios...
  • Vue实现文件上传和文件下载

    万次阅读 多人点赞 2018-08-22 22:09:55
    文件下载文件下载通常有几种方法 1.通过url下载 2.location.href 3.form提交直接下载 4.HTML5 a.download结合blob对象进行下载 第一种方式: 第一种方法是前后端的接口只给了一个API请求: 前端第一个...
  • vue下载文件导出保存到本地

    千次阅读 2021-03-10 10:56:12
    vue下载文件导出保存到本地 先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载本地 看看返回数据 res.config.url 中是下载链接地址,res.data 中是返回的二进制数据 如何下载 ... ...
  • vue下载文件以及文件重命名

    千次阅读 2020-01-13 10:18:45
    http Content-type对照.../** * 下载文件以及文件重命名 * @param item 文件在数据库中存储信息 * @param that this别名 */ export function downFile(item, that) { // xxx是后台接口, yyy是后台需要的数据 ...
  • vue 文件下载

    千次阅读 2019-09-29 09:48:43
    文章针对于前端基于Blob对象创建文件实现文件下载 直奔代码: // 首先创建数据对象 const data = {hello: "world"}; // 创建Blob并指定mine类型 const blob = new Blob([JSON.stringify(data)], {type: "text/...
  • vue 实现本地excel文件下载功能

    千次阅读 2020-10-18 17:44:19
    今天后端开发人员给了我一个excel文件,跟我说要实现excel下载功能,就是将给的excel文件下载下来。 所以我还用之前用过的方法来实现,分为三步: 1、首先将文件导入到系统中并引入,然后添加按钮事件 2、完善...
  • vue下载导出excel文件

    千次阅读 2020-05-21 11:07:56
    vue下载导出excel文件vue(js)下载(导出)excel( .xls .xlsx)文件接口文件 getData.jsaxios请求封装 fetch.js vue(js)下载(导出)excel( .xls .xlsx)文件 直接上代码 <template> <div> {{message}} &...
  • vue实现当前页文件下载及重命名文件名 原理:创建a标签,添加事件 代码如下 handleDownload() { let checkList = [{ResourcesUrl:'http://localhost:8080/download/a.docx',ResourcesName:'a.docx'},{ResourcesUrl:...
  • Vue项目读取本地文件

    千次阅读 2020-07-31 10:35:24
    Vue项目读取本地文件 观前提示: 本文所使用的IDEA版本为ultimate 2019.1,node版本为v12.16.2,vue版本为@vue/cli 4.3.1。
  • vue 读取本地文件内容

    千次阅读 2020-05-07 18:16:09
    本地文件中内容显示在页面上 <el-button type=“success” id=“fileImport” v-on:click=“clickLoad”>浏览</el-button> <input type=“file” id=“files” ref=“refFile” style=“display:...
  • Vue 下载本地静态资源

    千次阅读 2020-04-14 10:53:25
    Vue 下载本地静态资源 项目需要下载本地的Excel文档,文档是放在本地的没有在服务器,所以需要下载本地静态资源文件,开始把文件放在了 这里src目录下的assets资源文件下 ![在这里插入图片描述]...
  • vue访问本地文件404

    2019-10-07 02:23:01
    用了vue cli3.0用axios调用本地json数据一直报404,找了半天郁闷,最后发现原因是,vuecli3.0public文件夹才是静态资源文件,问题解决,记录一下,以后不再踩坑。 转载于:...
  • Vue引入本地文件无效

    千次阅读 2020-08-21 23:58:04
    我在根目录下建立了css文件夹用来装样式文件 但是在引入的时候,我认为他已经在static文件夹下了(因为运行时它会被安排在那里) 你看,它还在提示,找不到bootstrap.css,因为它现在确实不在static下,但是当运行
  • VUE项目下载文件,提示未找到文件

    千次阅读 2020-05-17 23:29:43
    VUE项目下载文件,提示未找到文件 是用a标签download属性 文件放在static和assets里都显示未找到文件 最后看到一篇文章说放在public里!而且a标签路径是相对于index.html的。这样可行了。 该文章链接: ...
  • Vue 引用本地json文件

    千次阅读 2019-04-19 15:53:12
    Vue 引用本地json文件 Vue引用本地的json文件其实是很容易的,废话不多说! 首先来看哈文件目录结构 json文件路径 目标Vue文件路径 引用Json文件 <script> import TestData from "../../../...
  • Vue如何下载文件

    2020-04-20 17:17:00
    https://github.com/Daotin/daotin.github.io/issues/135
  • vue js下载文件方法

    千次阅读 2019-11-15 11:04:11
    // 下载文件 downFile (item) { const link = document.createElement('a') link.setAttribute("download", item.ATTA_NAME) //下载的文件名 link.href = item.ATTA_URL //文件url link.click() ...
  • SpringBoot + Vue 实现文件上传功能,文件下载功能
  • Vue 下载前台项目文件

    千次阅读 2019-09-06 17:25:47
    我这边的项目需求是需要提供一个模版下载的功能,想着看看前台能不能实现,代码如下 <el-button v-permission="['ADMIN','PARTY_ALL','PARTY_CREATE']" :loading="downloadLoading" size="mini" class=...
  • vue中读取本地文件

    千次阅读 2020-03-25 19:38:06
    原理其实就是通过http请求访问项目的静态文件 vue中读取本地文件
  • vue+java 文件下载

    千次阅读 2019-03-13 14:34:35
    vue+Java 文件下载 背景 算是第一次,前后端自己琢磨文件下载了。直接上代码吧。 前端代码 &amp;amp;amp;lt;template&amp;amp;amp;gt; &amp;amp;amp;lt;div&amp;amp;amp;gt; &amp;amp;amp;lt...
  • vue文件下载功能实现前端实现关键代码后端实现关键代码 前端实现关键代码 vue组件中首先引入相应的依赖 import axios from "axios"; const FileSaver = require("file-saver"); 下载代码 axios({ url: url, time...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 122,827
精华内容 49,130
关键字:

vue下载本地文件

vue 订阅