精华内容
下载资源
问答
  • vue框架中, 接收并下载文件流(blob对象)  可以通过将其转成blob对象,添加到a标签或者iframe标签中来模拟下载(或者pdf预览) 1.首先设置responseType对象格式为 blob:  responseType:‘blob’ 在项目reques....

    在vue框架中, 接收并下载文件流(blob对象)
      可以通过将其转成blob对象,添加到a标签或者iframe标签中来模拟下载(或者pdf预览)

    1.首先设置responseType对象格式为 blob:
      responseType:‘blob’

    在项目reques.js文件中 添加请求头的相关配置 如header responseType 等
    config.headers['Authorization'] = getToken()
          if(config.responseType){
            config.responseType = 'blob'
          }
    
    在api.js文件中   添加responseType:'blob'参数
    //授权码下载 
    export function downloadcode(query) {
      return request({
        url: '/authCode/download',
        method: 'get',
        params: query,
        responseType:'blob'
      })
    }
    
    项目页面中:
    //下载方法
        handleDown(row) {
          const data = {
            id:row.id
          }
          downloadcode(data).then(res => {
            console.log("下载的文件流",res)
            const link=document.createElement('a');
            try{
    	          // let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});    //如果后台返回的不是blob对象类型,先定义成blob对象格式
    	          let blob =  res.data    //如果后台返回的直接是blob对象类型,直接获取数据
    	          let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1]; //拆解获取文件名,
    	          link.style.display='none';
    	          
    	          方法1: 创建--下载--销毁
    	          // 兼容不同浏览器的URL对象
    	          const url = window.URL || window.webkitURL || window.moxURL;
    	          link.href=url.createObjectURL(blob);
    	          link.download = _fileName;   //下载的文件名称
    	          link.click();
    	          window.URL.revokeObjectURL(url);  //  #URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法.
    
    			方法2:  创建--下载--销毁
    			   // 兼容不同浏览器的URL对象
    	          const url = window.URL || window.webkitURL || window.moxURL;
    	          link.href=url.createObjectURL(blob);
    	          link.setAttribute('download'_fileName.substring(_fileName.lastIndexOf('_')+1)));
                  document.body.appendChild(link);
                  link.click();
                  document.body.removeChild(link);
                  url.revokeObjectURL(link.href);//销毁url对象
            }catch (e) {
              console.log('下载的文件出错',e)
            }
          })
        },
    

    返回的文件流 示例:
    在这里插入图片描述

    axios get 请求方式

    	axios.get(`/dev-api/authCode/download?id=`+row.id,
            { //请求头需要的一些配置
              headers:{
                  "Authorization":getToken()
                },
              responseType: 'blob',//设置返回类型
            }
         ).then((res)=>{
            console.log('下载的文件',res)
            const link=document.createElement('a');
            try{
    	          let blob =  res.data
    	          let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1];//文件名,中文无法解析的时候会显示 _(下划线),生产环境获取不到
    	          link.style.display='none';
    	          // 兼容不同浏览器的URL对象
    	          const url = window.URL || window.webkitURL || window.moxURL;
    	          link.href=url.createObjectURL(blob);
    	          link.download = _fileName;
    	          link.click();
    	          window.URL.revokeObjectURL(url);
            }catch (e) {
              console.log('下载的文件出错',e)
            }
          }).catch(()=>{
            console.log('下载的文件出错')
          })  
    

    参考:https://www.cnblogs.com/raymond-yan/p/10364120.html
    https://blog.csdn.net/clmmei_123/article/details/108105046

    展开全文
  • 后端返回图片数据流,打印结果是乱码,如下: Chrome浏览器的preview中可以看到二维码(图片),如下: 解析思路: 尝试用二进制大对象Blob解析,然后生成图片的URL,代码如下: // QRCode 为后端接口返回的图片...
  • 做登录或者注册的时候,会用到验证码,前端会接收后端发的验证码图片 就像这样的 <el-form-item label="验证码" prop="name"> <el-input style="width: 147px;" v-model="ruleForm.verification" ...

    https://blog.csdn.net/qq_43477721/article/details/106100824

    做登录或者注册的时候,会用到验证码,前端会接收后端发的验证码图片

    在这里插入图片描述

    就像这样的

    <el-form-item label="验证码" prop="name">
      <el-input style="width: 147px;" v-model="ruleForm.verification" placeholder="请填写验证码"></el-input>
      <div class="verification">
        <img :src="this.verificationImg" alt="" @click="acquireVerification">
      </div>
    </el-form-item>
    
    data () {
      return {
        verificationImg: '',
        ruleForm: {
          verification: ''
        }
    },
    
    acquireVerification () {
    	// {responseType: 'blob'} ,不加这个返回的就是乱码
        //直接获取
      axios.get('/api/verifyCode', {responseType: 'blob'}).then((response) => {
        console.log(response.data)
        this.verificationImg = window.URL.createObjectURL(response.data)
        console.log(this.verificationImg)
      })
        //加参数的
        axios({
          method: "get",
          url: "/purchase/captcha.jpg",
          params: {
            uuid:this.loginForm.uuid,
          },
          responseType: "blob",
        })
          .then(response => {
            console.log(response.data);
            this.verificationImg = window.URL.createObjectURL(response.data)
          })
          .catch(error => {
            console.log(error.data);
          });
    
          }
    }
    
    
    mounted () {
      this.acquireVerification()
    }

     

    展开全文
  • 处理后台返回流文件,多张图片处理,返回成一个压缩包 处理方法: 就可以下载成一个压缩包了哦 单张图片下载(相当于浏览器下载)
    1. 处理后台返回流文件,多张图片处理,返回成一个压缩包
      在这里插入图片描述
      处理方法:
      在这里插入图片描述
      在这里插入图片描述
    let blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
    let fileName = decodeURI(res.headers['content-disposition'].split('filename*=utf-8')[1])
    if (window.navigator.msSaveBlob) {
    	// ie
        window.navigator.msSaveOrOpenBlob(blob, fileName)
         return
    }
    let elink = document.createElement('a')
    elink.style.display = 'none'
    elink.href = window.URL.createObjectURL(blob)
    elink.download = fileName
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href)
    document.body.removeChild(elink)
    

    就可以下载成一个压缩包了哦

    1. 单张图片下载(相当于浏览器下载)
      在这里插入图片描述
    this.$http.post( --接口名---, data, { responseType: 'arraybuffer' })
       .then(response => {
          return 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        })
        .then(data => {
          var link = document.createElement('a')
          link.href = data
          if (imgsrc.indexOf('.jpg') != -1) { // 判断图片格式,非jpg格式,都已png格式显示
            link.download = name + '.jpg'
          } else {
            link.download = name
          }
          link.click()
        })
    

    展开全文
  • async getDataList() { const _res = await this.$... caseNumbers: ['cdx12', '131'], columns: this.codeCol, },{responseType: 'arraybuffer'}) let blob = new Blob([_res.data], { type: 'application/vnd.ms-
    async getDataList() {
          const _res = await this.$http.put('total/export', {
            caseNumbers: ['cdx12', '131'],
            columns: this.codeCol,
          },{responseType: 'arraybuffer'})
          let blob = new Blob([_res.data], { type: 'application/vnd.ms-excel' })
          let objUrl = URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.href = objUrl
          link.download = 'data.xlsx'
          link.click()
          URL.revokeObjectURL(objUrl)
        },
    
    展开全文
  • 因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来。 先看下效果图: 页面效果: 点击 导出Excel 调用导出接口成功了: 后台...
  • 代码: <el-button type="primary" size="small" class="button-export" @click="exportHandle">导出</el-button> exportHandle() { let para = { ... }; ... .then(re
  •  在做员工系统时,前端传递图片文件给后端后端返回的图片路径为姓名+员工部门,此时重新以当前员工身份传递图片时,后端返回的路径仍然为当前员工姓名与员工部门,此时我们传递的新图片已经保存到了后端数据库中...
  • get请求获取到后端传来的图片流不能直接再页面进行展示,需要在接口处进行转化再赋值,转化的方式就是 window.URL.createObjectURL( ) ,将图片流转化为本地请求地址。 let res= await this.$http.get('url',{ ...
  • vue接收后端传来的pdf文件流,前端调用预览PDF

    千次阅读 热门讨论 2021-01-08 18:07:29
    我的业务场景是需要解析后端的PDF文件流,然后预览最后可以打印出来就完事! 完全不需要插件几句代码就搞定了,这里就不废话了直接上代码! 直接起飞!!!懂得都懂香就完事!有问题评价 export function getFile(id)...
  • 原文链接:...resumeDownload(data) { return request({ url: app.resumeDownload, method: 'post', data, responseType: 'blob' // 请求头必须加 }) }, ...// 下载简历压缩包 downZip(id) {
  • 解决办法
  • 文章目录#1.vue+axios保存后端发来的token#1.1根据接口文档来保存#1.2使用localstroage或者cookie或者sessionStroage保存token#2.vue+axios取出保存的token,向后端发送请求#2.1使用cookie携带token(获取到之后,再...
  • } } 4、为了方便打包后去除'/api',建议把'/api'设成全局,在main.js中添加 Vue.prototype.api = process.env.NODE_ENV === 'production' ? '' : '/apis' 调用接口的时候的url就可以写成api + '接口地址'
  • 后台返回一个File类型的数据给...2、使用blob类型接收 3、销毁URL对象 this.$axios.post(this.$api.getThesisExcel(),paper,{ responseType: 'blob',//设置返回类型 }).then((res)=>{ const link=document.cre
  • vue 获取后端数据

    千次阅读 2018-03-18 16:01:00
    1、vue-resource从后端请求我们需要的数据 下载安装npm install vue-resource 装完之后重新启动项目 模拟后端数据,启动测试服务器 注意哦:最新的(我用的3.6)webpack 的build目录下删除了dev-server.js , ...
  • 参考链接:https://juejin.cn/post/6844904069136416781
  • 通过flask_sqlachemy 对sqlite数据库进行操作,并将得到的数据发送到前端vue,并由table 显示。 Sqlachemy数据库 配置 及创建 创建数据库python文件(DB.py) from flask import Flask from flask_sqlalchemy ...
  • 今天小编就为大家分享一篇vue使用ajax获取后台数据进行显示的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue解决后端返回Long类型丢失精度问题 最近帮人搞个项目,由于没怎么对接,后端就直接返回long类型的id,这搞得前端比较被动,后端如果处理long类型,会影响其他功能,索性前端想办法解决吧,正所谓:没有解决不了的...
  • 后端代码: # 项目的根目录 起服务后,相对路径可能会改变 basedir = os.path.abspath(os.path.dirname(__file__)) @app.route('/getPic',methods=['GET', 'POST']) def findpic(): img_url = basedir+'/static/tt...
  • 由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,后端数据就为null,所以在发送之前,需要使用qs模块对其进行处理。 他们的格式: Request Payload:...
  • export default { methods:{ // 下载 downLoad(fileName) { // 传给后端的参数 let params = { fileName }; getDownload(params).then(res => { console.log(res); let blob = this.dataURLtoBlob(res.data....
  • 前言: 这是我的做法,基本上是搬运官方的办法照葫芦画...那么在当前Vue组件实例中定义并初始化数据源 export default { name: 'Tree', data(){ return{ nodeData: [ { id:999, labelName:root, children:[] }
  • 忘记从哪找到的了,直接上代码了 // 导出 exportMonthlySalePlan(){ let param = { productId:sessionStorage.getItem('productId'), adminId:this.adminId, year:this.date.getFullYear(), ...
  • 验证码登录的实现思路 1.前端从后端拿到验证码图片 2.输入验证码进行登录 3.后端拿到验证码进行比对,正确登录成功。 // template <a-input style="width:60%" size="large" type="text" ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,193
精华内容 6,877
关键字:

vue接收后端图片

vue 订阅