大创意网站,html制作电影网站,茶网站建设,网站建设的需求分析报告背景#xff1a;材料上传之后点击预览实现在浏览器上预览的效果 效果如下#xff1a; 实现代码如下#xff1a; //预览和下载操作
el-table-column fixedright label操作 width210template #defaultscope材料上传之后点击预览实现在浏览器上预览的效果 效果如下 实现代码如下 //预览和下载操作
el-table-column fixedright label操作 width210template #defaultscopespanclickhandleRowClick(scope.row)classtable-btn btn-handlei classri-eye-line/i预览/spanspanclickhandleDownLoadClick(scope.row)classtable-btn btn-handlei classri-download-2-line/i下载/span/template/el-table-column
// 材料预览
export function materialPreview(data) {return Http.request({url: /file/preview,method: get,responseType: blob,data: data});}//预览弹窗el-dialogtitle预览:visible.syncPreviewDialogVisibleappend-to-bodywidth70%centerdiviframe :srcpdfSrc width100% height800px/iframe/div/el-dialog//data中定义的变量data() {return {pdfSrc: ,downloadUrl: http://10.110.96.76/,PreviewDialogVisible: false,}}//预览代码handleRowClick(row) {materialPreview({fileName:row.fileName,realFileName:row.fileName,}).then((res) {console.log(res);const blob new Blob([res.data], { type: application/pdf });this.pdfSrc window.URL.createObjectURL(blob);this.$nextTick(() {this.PreviewDialogVisible true;});console.log(this.pdfSrc);//window.open(this.pdfSrc) //新窗口打开借用浏览器去打印});}//下载代码handleDownLoadClick(data) {if (data.downloadUrl ! null) {window.open(this.downloadUrl data.downloadUrl);}},后台返回的流文件格式
