pdf 上傳和預覽


要實現以上效果:


import { Field } from 'vant';
Vue.use(Field);

<van-field name="uploader" label="文件上傳">

<template #input>

<van-uploader :max-count="1" :after-read="afterRead" v-model="uploader" accept=".pdf">

<van-button icon="plus" type="primary" color="#00A2FF">上傳文件</van-button> <!--藍色的自定義的樣式-->

</van-uploader>

</template>

</van-field>


在data里面:
uploader:[],

fileId :"",
methods 方面里面:

afterRead(file) {

/*this.uploader[0].content*/ //base64 的pdf 二進制碼

this.uploadLibraryFile(this.uploader[0].content);

},


/*上傳pdf的接口*/

uploadLibraryFile(pdfBase64){

api
.uploadLibraryFile({

file: pdfBase64,
type: "pdf",

})
.then((res) => {

if (res.code == 200) {

this.overlayShow = false ; /*遮道層消失*/

this.= res.data.fileId; /*返回的fileId*/


} else {

Toast.fail(res.message);

this.overlayShow = false ; ///*遮道層消失*/

}
});


},

addFile(){

if (this.pdfNodes.length == 0){

if (this.fileName == "" || this.fileName.match(/^\s*$/) ){

Toast.fail('文件名稱不能為空');

return;

};


if (this.uploader.length == 0 ){

Toast.fail('請上傳文件');

return;

};

}



this.overlayShow = true ; /*開始出現遮道層*/


/*接口已經改好,無需調整*/

api
.addMenu({

fileId: this.fileId ,
menuName: this.fileName,
parentMenuId: this.thirdMenuId, //父級ID
/* type: this.type //父級ID*/

})
.then((res) => {

if (res.code == 200) {

this.overlayShow = false ; /*遮道層消失*/

Toast.success('新增成功');

this.$router.push({

name: 'productDescriptionForthClass',
params: {

type: this.type,
firstMenu: this.firstMenu,
secondMenuId: this.secondMenuId,
thirdMenuId: this.thirdMenuId,
thirdMName: this.thirdMName,

}

})



} else {

Toast.fail(res.message);

this.overlayShow = false ; ///*遮道層消失*/

}
});


},



//pdf 實現預覽的效果:
通過pdf,js 實現

第一步:下載 http://mozilla.github.io/pdf.js/getting_started/#download
下載穩定版:
把下載文件放到static靜態資源下面:build & web 兩個文件夾
<template>
<div class="wrap">

<iframe :src="pSrc" width="100%" height="100%"></iframe>

</div>
</template>

data:
pSrc:'',

 mounted () {

this.loadPDF();
//監聽返回鍵


},

methods:
loadPDF () {

//baseurl :pdf存放的文件路徑,可以是本地的,也可以是遠程,這個是遠程的,親測可以用

/* let baseurl = 'https://assettest.hzncc.cn/HncWeb/group1/M00/19/F6/CgEUdV8Nm5KALOf0AAM_XOvHKIY664.pdf';*/

//ie有緩存加個隨機數解決 + '?r=' + new Date()
let pSrc = this.baseurl + '?r=' + new Date();

this.pSrc = '../../../static/web/viewer.html?file=' + encodeURIComponent(pSrc) + '.pdf';
},

<style scoped>
.wrap{
position: fixed;
top: 46px; /*由於有navbar 所以設置top 的高度,高度很重要*/
left: 0;
width: 100%;
bottom: 0;
}
</style>









免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM