vue如何預(yù)覽后端傳來的二進制圖片
vue預(yù)覽后端傳來的二進制圖片
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' ?//這個響應(yīng)類型必須要寫 ? ? ? }).then(res => { ? ? ? ? // console.log(res) ?//二進制文件打印出來是亂碼 ? ? ? ? ?this.src = 'data:image/jpeg;base64,' + this.arrayBufferToBase64(res) ? ? ? ? ?this.imgdialog = true ? ? ? }).catch(err => { ? ? ? ? console.log(err) ? ? ? }) ? ? },
3.轉(zhuǎn)碼方法
? ? 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實現(xiàn)文件預(yù)覽功能的前端
預(yù)覽文件的前端
省略點擊按鈕點擊觸發(fā)showdialogview()方法的代碼
第一種方法
先在template中加入一個input框,綁定一個字符串類型的變量
寫showdialogview()方法
調(diào)用后臺的方法,如果返回的不是null(后臺返回的數(shù)據(jù)是一行一行返回的),就使用for循環(huán),添加到變量中去。
<template> ? <div class="content"> ? ? <!--文件預(yù)覽--> ? ? <el-dialog title="數(shù)據(jù)預(yù)覽" :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, // 文件預(yù)覽 ? ? ? ? dataview: '' ? ? ? } ? ? }, ? ? methods:{ ? ? ? //預(yù)覽文件 ? ? ? 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 鉤子執(zhí)行...'); ? ? } ? } </script>
第二種方法
可以在對話框中加入一個table標(biāo)簽,在tbody標(biāo)簽中使用v-html綁定變量,這樣,在字符串中的標(biāo)簽可以展示出來
因為后臺給的接口返回的數(shù)據(jù)是數(shù)組中的一個下標(biāo)對應(yīng)的一行數(shù)據(jù),把每一行的數(shù)據(jù)拆分成字符串?dāng)?shù)組,然后放在單元格中,這樣展示出來比較整齊,還可以添加樣式。
<template> ? <div class="content"> ? ? <!--預(yù)覽的模態(tài)框--> ? ? <el-dialog title="文件內(nèi)容預(yù)覽" :visible.sync="previewVisible" modal-append-to-body="false" append-to-body="true" style="height: 100%;"width="80%"> ? ? ? <p style="color:red">若可視化,請選擇數(shù)值列</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, ?// 預(yù)覽模態(tài)框的 ? ? ? ? ?datafileView:'', // 預(yù)覽的表格 ? ? ? } ? ? }, ? ? methods:{ ? ? ? // 打開預(yù)覽的模態(tài)框 ? ? ? openPreview (id){ ? ? ? ? this.previewVisible = true; ? ? ? ? this.viewData(id); ? ? ? }, ? ? ? // 在后臺查詢預(yù)覽 ? ? ? 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 鉤子執(zhí)行...'); ? ? } ? } </script>
缺點:使用v-html,即使標(biāo)簽在瀏覽器中展示出來,但是里面的方法不可以使用,里面的方法失效。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3 el-form-item如何自定義label標(biāo)簽內(nèi)容
這篇文章主要介紹了vue3 el-form-item如何自定義label標(biāo)簽內(nèi)容問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10有關(guān)vue 開發(fā)釘釘 H5 微應(yīng)用 dd.ready() 不執(zhí)行問題及快速解決方案
這篇文章主要介紹了有關(guān)vue 開發(fā)的釘釘 H5 微應(yīng)用 dd.ready() 不執(zhí)行問題及快速解決方案,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05element-ui?tree?手動展開功能實現(xiàn)(異步樹也可以)
這篇文章主要介紹了element-ui?tree?手動進行展開(異步樹也可以),項目中用到了vue的element-ui框架,用到了el-tree組件,需要的朋友可以參考下2022-08-08