vue如何预览后端传来的二进制图片

vue预览后端传来的二进制图片

1.新建一个对话框

用来显示图片

<el-dialog title="" :visible.sync="imgdialog" width="70%">
 <img :src="src" />
</el-dialog>

2.下载方法

可以将request替换成axios

download(row) {
   this.$request({
    url: baseUrl + '/file/download',
    method: 'post',
    data: row,
    responseType: 'arraybuffer' //这个响应类型必须要写
   }).then(res => {
    // console.log(res) //二进制文件打印出来是乱码
    this.src = 'data:image/jpeg;base64,' + this.arrayBufferToBase64(res)
    this.imgdialog = true
   }).catch(err => {
    console.log(err)
   })
  },

3.转码方法

  arrayBufferToBase64(buffer) {
   var binary = ''
   var bytes = new Uint8Array(buffer)
   var len = bytes.byteLength
   for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i])
   }
   return window.btoa(binary)
  }

vue实现文件预览功能的前端

预览文件的前端

省略点击按钮点击触发showdialogview()方法的代码

第一种方法：

先在template中加入一个input框，绑定一个字符串类型的变量

写showdialogview()方法

调用后台的方法，如果返回的不是null（后台返回的数据是一行一行返回的）,就使用for循环，添加到变量中去。

<template>
 <div class="content">
  <!--文件预览-->
  <el-dialog title="数据预览" :visible.sync="dialogvisibleview" >
   <el-input type="textarea" :rows="10" placeholder="" v-model="dataview">
   </el-input>
  </el-dialog>
 </div>
</template>

<script>
 import api from '../../api/api'
 import $ from 'jquery';
 import axios from 'axios';
 export default {
  name: "DataFile",
  inject: ['reload'],
  data(){
   return {
    dialogvisibleview: false, // 文件预览
    dataview: ''
   }
  },
  methods:{
   //预览文件
   showdialogview(id) {
    this.dataview ='';
    var dataView = new FormData;
   // var num=20;
    dataView.append("id",id);
    api.getDataDetail(dataView).then((response) => response.json())
     .then((data) => {
      if(data!=null){
       this.dialogvisibleview = !this.dialogvisibleview;
       //alert(data.data[0]);
       for (var i=0;i<=data.data.length-1;i++){
        this.dataview+=data.data[i]+"\n";
       }
      }
     });
   }
  },
  created: function () {
   console.log('cteated 钩子执行...');
  }
 }
</script>

第二种方法：

可以在对话框中加入一个table标签，在tbody标签中使用v-html绑定变量，这样，在字符串中的标签可以展示出来

因为后台给的接口返回的数据是数组中的一个下标对应的一行数据，把每一行的数据拆分成字符串数组，然后放在单元格中，这样展示出来比较整齐，还可以添加样式。

<template>
 <div class="content">
  <!--预览的模态框-->
  <el-dialog title="文件内容预览" :visible.sync="previewVisible" modal-append-to-body="false" append-to-body="true" style="height: 100%;"width="80%">
   <p style="color:red">若可视化，请选择数值列</p>
   <div id="modalContent" style="height: 600px;overflow:scroll;overflow-x:auto;overflow-y:auto ">
    <table id="box-table" style="border-collapse:collapse;height:60px;">
     <tbody id="table_body" v-html="datafileView"></tbody></table>
   </div>
  </el-dialog>
 </div>
</template>

<script>
 import api from '../../api/api'
 import $ from 'jquery';
 import axios from 'axios';
 export default {
  name: "DataFile",
  inject: ['reload'],
  data(){
   return {
    previewVisible:false, // 预览模态框的
    datafileView:'', // 预览的表格
   }
  },
  methods:{
   // 打开预览的模态框
   openPreview (id){
    this.previewVisible = true;
    this.viewData(id);
   },
   // 在后台查询预览
   viewData (fid) {
    this.datafileView="";
    var dataView = new FormData;
    dataView.append("id",fid);
    api.getDataDetail(dataView).then((response) => response.json())
     .then((data) => {
      var viewDataString="<tr>";
      var dataArray = ((String)(data.data[0])).split(",");
      for(var i =0;i<dataArray.length;i++){
       viewDataString=viewDataString+"<td style='text-align:center;width:10%'><input type='radio' name='tableheader' value='"+i+"' @click='f1()' /></td>";
      }
      viewDataString = viewDataString+"</tr><tr style='border-color:#1eb8f7;border-bottom-style:solid;border-width:1px'>";
      for(var i =0;i<dataArray.length;i++){
       viewDataString = viewDataString+"<th style='text-align:center;width:10%'>"+dataArray[i]+"</th>";
      }
      viewDataString = viewDataString+"</tr>";
      console.log(data.data.length);
      for(var x=1;x<data.data.length;x++){
       var dataArray = ((String)(data.data[x])).split(",");
       viewDataString = viewDataString+"<tr>";
       for(var i =0;i<dataArray.length;i++){
        viewDataString = viewDataString+"<td style='text-align:center;width:15%'>"+dataArray[i]+"</td>";
       }
       viewDataString = viewDataString+"</tr>";
      }
      this.datafileView =viewDataString;
      console.log(this.datafileView );
     });
   }
  },
  created: function () {
   console.log('cteated 钩子执行...');
  }
 }
</script>

缺点：使用v-html，即使标签在浏览器中展示出来，但是里面的方法不可以使用，里面的方法失效。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。