2.使用方式

通過web目錄下 viewer.html 查看器 + pdf文件路徑預(yù)覽pdf文件

yourPath/web/viewer.html?file=pdfPath 

微信小程序端——使用 web-view 標(biāo)簽

代碼示例：

//.wxml
<web-view src="{{pdfView+pdfUrl}}" ></web-view>

//.js
data: {
		// viewer.html 查看器的路徑
        pdfView:"yourPath/web/viewer.html?file=",
        // 要預(yù)覽的 pdf 文件的路徑
        pdfUrl:"http://play.li-stack.top:88/pdf/sjisr-3-2-36-42.pdf"
    },

運(yùn)行效果：

H5 端——使用 iframe 標(biāo)簽（使用vue框架）

代碼示例：

<template>
    <div>
        <iframe :src="src" style="width: 100%;height: 100vh" ></iframe>
    </div>

</template>

<script>
    export default {
        name: "myTestTwo",
        data(){
            return {
                url:'http://play.li-stack.top:88/pdf/sjisr-3-2-36-42.pdf',
                src:''
            }
        },
        mounted() {
            this.getUrl();
        },
        methods :{
            getUrl:function () {
                this.src = '/pdfplugin/web/viewer.html?file=' + this.url
            }
        }
    }
</script>

<style scoped>

</style>

運(yùn)行效果：

注意事項(xiàng)：

• web-view 標(biāo)簽?zāi)J(rèn)鋪滿全屏，會(huì)覆蓋其他組件；
• H5項(xiàng)目使用 pdf.js 注意跨域問題；

3.更改源碼

如何隱藏頂部工具欄

在業(yè)務(wù)要求中，不能讓用戶下載 pdf ，我這里處理的辦法就是將頂部工具欄隱藏
處理方法：

• 在 web 文件夾下的 viewer.html 文件，搜到 <div class="toolbar">
• 將其改為 <div class="toolbar" style="display:none">這樣就可以隱藏了。

如何讓用戶強(qiáng)制閱讀一定時(shí)間

在讓用戶強(qiáng)制閱讀時(shí)，一定是 pdf 文件先加載完成，才開始倒計(jì)時(shí)。
處理方法：

• 在 viewer.js 中找到 load 函數(shù)（可直接搜索load: function load(pdfDocument定位)） ，部分代碼如下

load: function load(pdfDocument) {
    var _this11 = this;

    this.pdfDocument = pdfDocument;
    pdfDocument.getDownloadInfo().then(function (_ref4) {
      var length = _ref4.length;
      _this11._contentLength = length;
      _this11.downloadComplete = true;

      _this11.loadingBar.hide();

      firstPagePromise.then(function () {
        _this11.eventBus.dispatch("documentloaded", {
          source: _this11
        });
      });
    });
	
	//添加以下代碼
	let mytime = 10
    let timeout = setInterval(()=>{
        console.log("倒計(jì)時(shí):",mytime)
        if(mytime == 0){
            clearTimeout(timeout)
        }else{
            --mytime
        }
    },1000)

    ……
  }

• 當(dāng)pdf加載成功后運(yùn)行效果，頁(yè)面渲染效果大家可以自行實(shí)現(xiàn)
  

如何獲取pdf總頁(yè)數(shù)

同樣在上述 load 函數(shù)中，當(dāng)pdf加載完成后，pdfDocument 屬性中就包含了當(dāng)前 pdf 的總頁(yè)數(shù)
處理方法：可通過 pdfDocument.numPages 獲取

如何獲取pdf當(dāng)前頁(yè)數(shù)

如果能獲取當(dāng)前頁(yè)數(shù)，也獲取了總頁(yè)數(shù)，這就可以實(shí)現(xiàn)閱讀進(jìn)度了，當(dāng)然閱讀進(jìn)度的細(xì)節(jié)還有很多，比如用戶很快地往下滑，這種肯定不能算是真正閱讀了，在這里我就不細(xì)分了，下面來(lái)獲取一下當(dāng)前頁(yè)數(shù)
處理方法：

• 可以在本地儲(chǔ)存中獲取，鍵名：pdfjs.history；
• 找到函數(shù) function webViewerPageChanging(_ref15) ，當(dāng)每次滑動(dòng)屏幕時(shí)，每經(jīng)過一個(gè)頁(yè)面就會(huì)得到當(dāng)前頁(yè)數(shù)，代碼如下:

function webViewerPageChanging(_ref15) {
  var pageNumber = _ref15.pageNumber,
      pageLabel = _ref15.pageLabel;
  //這里打印出來(lái)
  console.log(pageNumber)
  PDFViewerApplication.toolbar.setPageNumber(pageNumber, pageLabel);
  PDFViewerApplication.secondaryToolbar.setPageNumber(pageNumber);

  if (PDFViewerApplication.pdfSidebar.isThumbnailViewVisible) {
    PDFViewerApplication.pdfThumbnailViewer.scrollThumbnailIntoView(pageNumber);
  }
}

將總頁(yè)數(shù)和當(dāng)前頁(yè)數(shù)發(fā)送給小程序

有時(shí)候會(huì)需要H5和小程序通訊，可以參考 這篇文章

總結(jié)

本文主要是針對(duì)微信小程序的 web-view 標(biāo)簽，在H5中使用 ifream 獲取頁(yè)數(shù)會(huì)有更簡(jiǎn)單的的方法，
例如可以嘗試：

var iFrame = document.getElementById('iframe_id');
if( iFrame.contentDocument){
	let currentPageNum = iFrame.contentDocument.getElementById('pageNumber').value;
}
//或者
document.querySelector('iframe id').contentWindow.PDFViewerApplication.page;

//或者
window.PDFViewerApplication.pdfViewer.currentPageNumber

歡迎大家積極交流……文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-405680.html

到了這里，關(guān)于微信小程序?qū)崿F(xiàn)PDF預(yù)覽功能——pdf.js(含源碼解析）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！