vue如何預覽後端傳來的二進制圖片
vue預覽後端傳來的二進制圖片
1.新建一個對話框
用來顯示圖片
<el-dialog title="" :visible.sync="imgdialog" width="70%"> <img :src="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.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，即使標簽在瀏覽器中展示出來，但是裡面的方法不可以使用，裡面的方法失效。
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。