精华内容
下载资源
问答
  • vue文件下载:把文件流保存到本地
    2022-04-18 20:51:08

    开发vue项目时经常碰到文件下载的需求,分两种情况:

    一种是:后台给文件路径,前端拼地址去下载文件

    另一种是:后台直接返回文件流,前端去处理

    第一种很简单这里就不赘述了,直接给出第二种接受文件流并下载的方法:

    /**

    * 把二进制文件保存到本地

    * file 为后台返回的文件流

    * 请求接口可能需要设置 responseType: "arraybuffer"

    * name: 文件名,需要带后缀

    */

    function exportFile (file, name) {

    let url = window.URL.createObjectURL(new Blob([file]));

    let link = document.createElement('a');

    link.style.display = 'none';

    link.href = url;

    link.setAttribute('download', name);

    document.body.appendChild(link);

    link.click();

    document.body.removeChild(link); // 下载完成移除元素

    window.URL.revokeObjectURL(url); // 释放掉blob对象

    }

    关于 responseType: “arraybuffer”,可能需要加在请求接口上

    //以axios为例子:

    axios({

    method: 'post',

    url: '/user/12345',

    data: {

    firstName: 'Fred',

    lastName: 'Flintstone'

    },

    responseType:'arraybuffer'

    });

    基本就这些,欢迎补充!没有人事先了解自己到底有多大的力量,直到他试过以后才知道。

    更多相关内容
  • 今天小编就为大家分享一篇Vue保存数据磁盘文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue下载文件导出保存到本地

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

    vue中下载文件导出保存到本地

    先分析如何下载:先有一个链接地址,然后使用 location.hrefwindow.open()下载到本地

    看看返回数据
    在这里插入图片描述
    res.config.url 中是下载链接地址,res.data 中是返回的二进制数据

    如何下载

    ...
    <el-button icon="el-icon-download" @click="download(id)"></el-button>
    ...
    download(id) { // 导出
      this.$API({
        name: 'Download',
        paths: [id]
      }).then(res => {
        // window.open(res.config.url, '_self')或者
        window.location.href = res.config.url
      }).catch(error => {
        this.$message({ type: 'error', message: error })
      }).finally(() => {
      })
    }
    

    上面情况针对的是后端返回文件流,如果后端返回的是文件名
    在这里插入图片描述
    通用下载方法

    window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true
    

    这样就能实现在当前窗口下载文件了

    另一种情况

    如果下载的文件既可以是txt文件或html文件也可以是压缩包等,对于这种类型的下载处理

        download (row) { // 下载
          this.$API({
            name: 'DownloadResource',
            params: {
              path: row.path,
              token: this.$Cookies.get('token')
            },
            headers: {
              'Content-Type': 'application/octet-stream'
            },
            requireAuth: true
          }).then (res => {
            window.open(`${res.config.url}?path=${res.config.params.path}&token=${res.config.params.token}`, '_self')
          }).catch(error => {
            this.$message.error(error)
          })
        }
    

    对于 headers 中的 'Content-Type': 'application/octet-stream' ,需要在 axios 拦截器中单独处理
    建议把 res 打印出来看里面包含的内容

    axios.interceptors.response.use(res => {
      // 处理下载文件的接口
      if (res.config.headers['Content-Type'] === 'application/octet-stream') {
        return res
      }
      if (res.data.code) {
        return Promise.resolve(res)
      } else {
        return Promise.reject(res)
      }
    }, error => {
      return Promise.reject(error)
    })
    
    展开全文
  • 1.首先安装 ... 3. 同源图片下载 // 同源(访问的网站域名与服务器域名一致) // downs() { // this.imgUrl = 'https://img2.baidu.com/it/u=2937803703,3095540904&fm=26&fmt=auto&gp=0.jpg'; //

    1.首先安装 html2canvas 命令 npm install html2canvas
    2.使用的页面引入 import html2canvas from 'html2canvas';
    3. 同源图片下载

     ` // 同源(访问的网站域名与服务器域名一致)
        // downs() {
        // 	this.imgUrl = 'https://img2.baidu.com/it/u=2937803703,3095540904&fm=26&fmt=auto&gp=0.jpg';
        // 	var alink = document.createElement("a");
        // 	alink.href = this.imgUrl;
        // 	alink.download = "这是一张图片"; //图片名
        // 	alink.click();
        // }`
    
        4.不同源图片下载
    

    // 图片不同源下载

    downloadIamge(imgsrc, name) {
          //下载图片地址和图片名
          var image = new Image();
          // 解决跨域 Canvas 污染问题
     image.setAttribute('crossOrigin', 'anonymous');
          image.onload = function () {
            var canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            var context = canvas.getContext('2d');
            context.drawImage(image, 0, 0, image.width, image.height);
            var url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
            var a = document.createElement('a'); // 生成一个a元素
            var event = new MouseEvent('click'); // 创建一个单击事件
            a.download = name || 'photo'; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
          };
          image.src = imgsrc;
        },
    
      downs() {
          this.imgUrl =
            'https://questionnaireapi.psy-hs.com/api/Questionnairehost/GenerateQRCode?linh=https://hsq.psy-hs.com?31e667f2-08fe-4cc3-923b-fa430a99e565';
          this.downloadIamge(this.imgUrl, '二维码');
        },
    
    展开全文
  • 为了实现这个文件下载到本地的功能,真的是废了九牛二虎之力,以至于差点放弃(主要还是自己菜)。刚开始自己用到的是Window.open()的方法,发现这个方法只能将你的合同在新页面打开,并不能实现下载功能;然后就换...

    公司业务需求,我需要实现一个合同模板,自定义输入内容后生成合同随后导出下载合同。(自定义部分用到的是)
    为了实现这个文件下载到本地的功能,真的是废了九牛二虎之力,以至于差点放弃(主要还是自己菜)。刚开始自己用到的是Window.open()的方法,发现这个方法只能将你的合同在新页面打开,并不能实现下载功能;然后就换了html5 Bolb方法,弄了些许时间后发现还是不能达到自己的需求,最后在不断的挣扎中找到了**FileSaver.js** 首先需要安装即:npm install file-saver --save
    安装后项目中引入saveAs:import {saveAs} from 'file-saver'

    保存文件代码:var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"}); saveAs(file);

    具体实现效果如下如所示:
    在富文本编辑器中输入内容

    当合同内容确定好之后点击下载

    下载完成后就可以查看合同效果了

    通过以上方式就可以实现此功能了,有需要可留言!!!

    展开全文
  • 主要为大家详细介绍了vue实现文件上传读取及下载功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 第一种: <?...function downfile() { ... //文件名 $date=date("Ymd-H:i:m");... Header( "Content-type: application/octet-stream ");...Header( "Accept-Length: " .filesize($filename));...
  • 本次主要分享一下前端如何保存后端返回文件到本地,是否为vue项目均可。 关键点: axios URL.createObjectURL 实现思路: 首先设置axios的响应类型为 responseType: 'blob' ,也就把流文件转换成blob对象;...
  • vue项目下载项目本地文件

    千次阅读 2021-11-12 11:52:44
    文件放置 public 文件夹下,在需要下载直接 window.location = '/+文件名'; eg: 我文件直接放置在public文件夹下的根目录,文件名为student_list window.location = '/student_list.xlsx';
  • <div> <a href="1.txt" target="_blank" download="1.txt">下载实例</a> </div> 在基于vue cli3搭建项目的public文件下放入要下载文件1.txt。
  • 需要将下载文件放在static文件夹中,否则可能会出现文件找不的情况 代码例子如下 <a href="../../../static/excel/excel.xls" target="_blank" style="text-decoration:none;color: #606266;" download=...
  • 主要介绍了vue生成token并保存到本地存储中,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 这个很重要的一点是,给的下载地址一定一定要正确,要能下载,如果失败那基本上是地址的问题了... 如果不加速http://的话 axios 会认为你那是一个API接口,而不是一个域名 <Button type="primary" @click=...
  • 参考 ...后台返回一个File类型(文件流、byte)的数据给前端。 前端请求的时候 1、设置返回类型responseType,不管你用post\get\ect都要设置,还有post请求要设置content-type:...vue 前端 export function getFileBlob(qu
  • javascript,vue实现图片下载到本地

    万次阅读 2018-07-27 12:12:16
    原生js中: &lt;img src="./boy.png" class="img1"...下载" onclick="down('img1')"&gt; function down(selector, name) {  // 生成一个a元素  
  • 该案例实现前端Vue通过axios请求SpringBoot后台,实现文件下载功能。 filepack : 前端项目 8081端口。 fileServer: 后端项目 8080端口。
  • 文件下载到本地 @param {[type]} data [二进制文件流] @param {[type]} fileName [创建的下载文件名] */ export function dowloadFunc(data, fileName, fileType) { try { let type='application/vnd....
  • 此例仅传输一个文件
  • PDF直接下载到本地vue

    2022-04-11 17:06:05
    charset=UTF-8"}) // 这里的res为后端返回的流数据 let aLink = document.createElement("a") aLink.download = “xxxxx"// 下载文件的名字 aLink.href = URL.createObjectURL(blob) aLink.click() } ajax.send() }
  • SpringBoot + Vue 实现文件上传功能,文件下载功能
  • Vue实现文件上传和文件下载

    万次阅读 多人点赞 2018-08-22 22:09:55
    文件下载文件下载通常有几种方法 1.通过url下载 2.location.href 3.form提交直接下载 4.HTML5 a.download结合blob对象进行下载 第一种方式: 第一种方法是前后端的接口只给了一个API请求: 前端第一个...
  • 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....
  • 需求: 将勾选的列表项的id传给后台,让后台处理并下载对应的图片 1、 后台接口: 下载图片zip: GET /download ... 请求参数: ...2、前端Vue页面: template: <el-button type="success" @click="dowI
  • vue 下载文件选择路径

    2022-04-26 16:10:07
    请问我想在vue项目中,点击下载然后弹出一个框,里面可以选择下载文件的路径,并且获取这个下载文件的路径 类似于这样的弹出框 谢谢!!
  • 最近公司需要一个身份证读卡功能的需求,不过用这个需求必须在本地电脑下载一个压缩包去安装这个软件 1.正常来说我们就直接请求后台写的接口 // 点击查看文档 async handleText() { let res = await this.$...
  • 这是我的前端 利用form表单提交 这是前端调用的方法 其实 无论是什么前端 只要能将服务器路径传后台代码就行了 SpringBoot的Controller ...能够实现下载 无论是图片还是文件 都可以 最近项目用到的 记录一下 ...
  • 本篇文章主要介绍了详解vue中使用express+fetch获取本地json文件,非常具有实用价值,需要的朋友可以参考下
  • 必须同源(访问的网站域名与服务器域名一致)才能下载 downs() { var alink = document.createElement("a"); alink.href = this.shop.shoppic_url; alink.download = "pic"; //图片名 alink.click();}, 解决图片不...
  • vue 下载pdf文件

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,174
精华内容 9,669
关键字:

vue下载文件保存到本地

友情链接: gaotonglvboqi.rar