使用vue實現(xiàn)pdf預覽功能的方法
更新時間:2023年08月09日 09:49:42 作者:weixin_49203377
許多朋友想要材料上傳之后點擊預覽實現(xiàn)在瀏覽器上預覽的效果,所以本文將給大家介紹如何使用vue實現(xiàn)pdf預覽功能,文中有實現(xiàn)代碼,有需要的朋友可以參考閱讀下
背景:材料上傳之后點擊預覽實現(xiàn)在瀏覽器上預覽的效果
效果如下:

實現(xiàn)代碼如下://預覽和下載操作
<el-table-column fixed="right" label="操作" width="210">
<template #default="scope">
<span
@click="handleRowClick(scope.row)"
class="table-btn btn-handle"
><i class="ri-eye-line"></i>預覽</span
>
<span
@click="handleDownLoadClick(scope.row)"
class="table-btn btn-handle"
><i class="ri-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-dialog
title="預覽"
:visible.sync="PreviewDialogVisible"
append-to-body
width="70%"
center
>
<div>
<iframe :src="pdfSrc" width="100%" height="800px"></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);
}
},后臺返回的流文件格式

到此這篇關于vue實現(xiàn)pdf預覽功能的方法的文章就介紹到這了,更多相關vue實現(xiàn)pdf預覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue 重塑數(shù)組之修改數(shù)組指定index的值操作
這篇文章主要介紹了vue 重塑數(shù)組之修改數(shù)組指定index的值操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue3.x lodash在項目中管理封裝指令的優(yōu)雅使用
這篇文章主要為大家介紹了vue3.x lodash在項目中管理封裝指令的優(yōu)雅使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
vue事件監(jiān)聽函數(shù)on中的this指針域使用
這篇文章主要介紹了vue事件監(jiān)聽函數(shù)on中的this指針域使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08
vue使用el-upload實現(xiàn)文件上傳的實例代碼
這篇文章主要為大家詳細介紹了vue使用el-upload實現(xiàn)文件上傳,文中示例代碼介紹的非常詳細,對大家的學習或工作有一定的幫助,感興趣的小伙伴們可以參考一下2024-01-01

