vue專案 匯入pdf功能 以及 預覽Pdf

2021-10-09 17:13:36 字數 2056 閱讀 6843

先上效果圖

上傳pdf的具體**如下:

class

="upload-demo"

ref="upload"

:action

="action"

:on-preview

="handlepreview"

:on-remove

="handleremove"

:before-upload

="beforeupload"

multiple

:limit

="1"

:on-change

="filechange"

:on-success

="handlesuccess"

:on-exceed

="handleexceed"

:file-list

="filelist"

:headers

="gisqtoken"

>

size

="small"

type

="primary"

>

上傳檔案el-button

>

slot

="tip"

class

="text"

>

請上傳.pdf檔案span

>

el-upload

>

// 關於上傳pdf部分 start

handlesuccess

(res, file)

else

// // this.dialo**isible = false;

// } else else

// }},

filechange

(file, filelist)

,handleremove

(file, filelist)

,handlepreview

(file)

,handleexceed

(files, filelist)

個檔案,共選擇了

$個檔案`);

},beforeupload

(file)

// let reader = new filereader();

// reader.readasdataurl(file);

// console.log(new filereader().readasdataurl(file),'reader.readasdataurl(file)')

// console.log(reader.result,'reader.result')

// let that = this;

// reader.onload = function() ;

// console.log(that.filedata,'that.filedata')

// return false; // 返回false不會自動上傳},

// 刪除檔案之前的鉤子

beforeremove

(file, filelist)?`)

;},// 關於上傳pdf部分 end

此處 注意 beforeupload為關鍵性**

提交表單的時候要按照以上格式操作。到這裡基本已經實現了匯入pdf格式的檔案

預覽pdf 需要如下操作:

效果如下:

哈哈哈 假裝有pdf

樣式功能以及設計功能

目錄 設計樣式 樣式選單功能主要是用來簡化的重複性的文字標題格式處理工作,利用樣式選單裡面的選項卡選擇適合的樣式對目標標題進行修改。樣式選單功能在開始選單裡面。1.單行修改標題只需要將游標放在標題的最後。2.選擇點選合適的標題樣式。1.選中要修改的多行標題。2.選擇點選合適的標題樣式。檢視標題目錄可...

vue專案登陸頁記住密碼功能以及選單許可權

login bg login wrap el login title 登入表單 formref class form wrap rules formrules model forminfo margin bottom 40px prop phone inputstyle v model formin...

vue專案中實現pdf檔案預覽功能

最近遇到乙個實現pdf檔案預覽功能的需求,分享一下實現方法 pdf預覽相對word excel ppt等檔案的預覽比較容易,因為常見的瀏覽器都是支援pdf檔案直接預覽,所以最簡單的實現方法就是在瀏覽器中直接輸入pdf檔案存放在伺服器上的路徑位址就可以直接預覽 1 使用瀏覽器預設支援訪問pdf檔案的功...