vue如何预览后端传来的二进制图片
短信预约 -IT技能 免费直播动态提醒
vue预览后端传来的二进制图片
1.新建一个对话框
用来显示图片
<el-dialog title="" :visible.sync="imgdialog" width="70%">
<img :class="lazy" data-src="class="lazy" data-src" alt=""/>
</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.class="lazy" data-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，即使标签在浏览器中展示出来，但是里面的方法不可以使用，里面的方法失效。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
