您好,登錄后才能下訂單哦!
本篇內容主要講解“Vue怎么使用pdfobject實現(xiàn)預覽pdf”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“Vue怎么使用pdfobject實現(xiàn)預覽pdf”吧!
pnpm add pdfobject
import pdf from 'pdfobject'
這里使用會借助于FileReader,F(xiàn)ileReader用于讀取文件
// 點擊文件上傳回調 handlePreview(file) { const { raw } = file // 預覽pdf // FileReader用于讀取文件 let reader = new FileReader() reader.readAsDataURL(raw) // 這里只需要將文件傳進去就可以了 reader.onload = e => { // reader.result 同 e.target.result // 1.文件名 2.要將pdf渲染到的指定位置(dom元素) 3.指定在embed標簽中的顯示的寬度 pdf.embed(reader.result, '#previewPdfAndDocx', { width: '100%' }) } },
我這里沒在上傳之前判斷,這里是上傳之后,點擊文件的時候進行預覽,也可以在上傳文件之前進行預覽,然后決定是否進行上傳。根據(jù)具體項目需求來
除了上文,還可以利用pdfobject實現(xiàn)其他功能,希望對大家有所幫助
效果1:在指定位置(當指定位置為全局時)瀏覽PDF
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在指定div中瀏覽PDF</title> <!--在此引入bootstrap只為初始化樣式div樣式--> <link rel="stylesheet" href="css/bootstrap.min.css" /> <style> /* 添加樣式是為了實現(xiàn)全屏效果 */ html,body{ height: 100%; overflow: hidden; } #example1{ height: 100%; } .pdfobject-container{ /* height: 500px; */ } .pdfobject{ /* border: 1px solid #666; */ } </style> </head> <body> <div id="example1"></div> <script type="text/javascript" src="js/pdfobject.min.js"></script> <script> // 我的pdf文件放在項目的pdf文件夾下,名字叫做Java.pdf PDFObject.embed("pdf/Java.pdf", "#example1"); </script> </body> </html>
效果2:在指定位置(當指定位置為局部時)瀏覽PDF
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在指定div中瀏覽PDF</title> <!--在此引入bootstrap只為初始化樣式div樣式--> <link rel="stylesheet" href="css/bootstrap.min.css" /> <style> html,body{ height: 100%; overflow: hidden; /* 添加背景顏色是為了方便查看整個body范圍 */ background-color: cornflowerblue; } #example1{ /* 設置放置PDF的div的樣式 */ height: 50%; width: 50%; } /* PDF容器樣式 */ .pdfobject-container{ /* height: 500px; */ } /* PDF樣式 */ .pdfobject{ /* border: 1px solid #666; */ } </style> </head> <body> <div id="example1"></div> <script type="text/javascript" src="js/pdfobject.min.js"></script> <script> // 我的pdf文件放在項目的pdf文件夾下,名字叫做Java.pdf PDFObject.embed("pdf/Java.pdf", "#example1"); </script> </body> </html>
效果3:指定從多少頁開始閱讀(必須同時指定顯示PDF的div)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在指定div中瀏覽PDF</title> <!--在此引入bootstrap只為初始化樣式div樣式--> <link rel="stylesheet" href="css/bootstrap.min.css" /> <style> /* 添加樣式是為了實現(xiàn)全屏效果 */ html,body{ height: 100%; overflow: hidden; } #example1{ height: 100%; } .pdfobject-container{ /* height: 500px; */ } .pdfobject{ /* border: 1px solid #666; */ } </style> </head> <body> <div id="example1"></div> <script type="text/javascript" src="js/pdfobject.min.js"></script> <script> // 我的pdf文件放在項目的pdf文件夾下,名字叫做Java.pdf,指定PDF從20頁開始閱讀 PDFObject.embed("pdf/Java.pdf", "#example1", {page: "20"}); </script> </body> </html>
到此,相信大家對“Vue怎么使用pdfobject實現(xiàn)預覽pdf”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。