Vue使用pdfobject實現(xiàn)預(yù)覽pdf的示例詳解

更新時間：2023年03月15日 15:57:58 作者：會說法語的豬

PDFObject?是一個?JavaScript?庫用來在HTML中動態(tài)嵌入?PDF?文檔。這篇文章主要為大家詳細(xì)介紹了使用pdfobject實現(xiàn)預(yù)覽pdf的功能，需要的可以了解一下

安裝

pnpm add pdfobject

引入

import pdf from 'pdfobject'

使用

這里使用會借助于FileReader，F(xiàn)ileReader用于讀取文件

// 點擊文件上傳回調(diào)
handlePreview(file) {
  const { raw } = file
  // 預(yù)覽pdf
  // FileReader用于讀取文件
  let reader = new FileReader()
  reader.readAsDataURL(raw) // 這里只需要將文件傳進(jìn)去就可以了
  reader.onload = e => {
    // reader.result 同 e.target.result
    // 1.文件名 2.要將pdf渲染到的指定位置（dom元素） 3.指定在embed標(biāo)簽中的顯示的寬度
    pdf.embed(reader.result, '#previewPdfAndDocx', { width: '100%' })
  }
},

效果

我這里沒在上傳之前判斷，這里是上傳之后，點擊文件的時候進(jìn)行預(yù)覽，也可以在上傳文件之前進(jìn)行預(yù)覽，然后決定是否進(jìn)行上傳。根據(jù)具體項目需求來

補(bǔ)充

除了上文，還可以利用pdfobject實現(xiàn)其他功能，希望對大家有所幫助

效果1：在指定位置（當(dāng)指定位置為全局時）瀏覽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：在指定位置（當(dāng)指定位置為局部時）瀏覽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{
                /* 設(shè)置放置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>

到此這篇關(guān)于Vue使用pdfobject實現(xiàn)預(yù)覽pdf的示例詳解的文章就介紹到這了,更多相關(guān)Vue pdfobject預(yù)覽pdf內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: