Vue項目中實現pdf文件嵌套在網頁內顯示

方案一：使用pdfjs插件將pdf嵌套在頁面中的某個位置

提示：

1、不兼容IE及兼容模式下的360瀏覽器（極速模式可以兼容），以上瀏覽器請自行為用戶設置不兼容提醒
2、canvas畫布是浮動在頁面元素之上的，請知悉
3、這里pdf文件由后端接口返回，如：http://192.168.1.164/imgs/202004/1588144455734.pdf
4、若pdf渲染不出來，則考慮是否是因為pdf文件地址的跨域問題

效果圖

實現步驟

1、安裝pdfjs依賴
yarn add pdfjs-dist 或  npm install pdfjs-dist --save

2、在頁面某個位置使用canvas畫布來渲染pdf文件
<canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>

3、data里注冊pages
data(){
   pages:'',  //pdf分頁   
}

4、引入PDFJS ，並調用相關函數_renderPage(),_loadFile()
import PDFJS from 'pdfjs-dist'

methods:{
    _renderPage (num) {
            this.pdfDoc.getPage(num).then((page) => {
                let canvas = document.getElementById('the-canvas' + num)
                let ctx = canvas.getContext('2d')
                let dpr = window.devicePixelRatio || 1
                let bsr = ctx.webkitBackingStorePixelRatio ||
                ctx.mozBackingStorePixelRatio ||
                ctx.msBackingStorePixelRatio ||
                ctx.oBackingStorePixelRatio ||
                ctx.backingStorePixelRatio || 1
                let ratio = dpr / bsr
                let viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
                canvas.width = viewport.width * ratio
                canvas.height = viewport.height * ratio
                // canvas.style.width = viewport.width + 'px'
                canvas.style.width = 6 + 'rem'  //設置寬度
                // canvas.style.height = viewport.height + 'px'  //設置高度，可以不設
                ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
                let renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                }
                page.render(renderContext)
                if (this.pages > num) {
                    this._renderPage(num + 1)
                }
            })
        },
        _loadFile (url) {
            PDFJS.getDocument(url).then((pdf) => {
                this.pdfDoc = pdf
                this.pages = this.pdfDoc.numPages
                this.$nextTick(() => {
                    this._renderPage(1)
                })
            })
        },
}

5、調用函數傳入pdf文件地址進行渲染
this._loadFile(pdfurl)

本文相關內容引自 https://www.jianshu.com/p/b48af7917656

方案二：使用iframe將pdf嵌套在頁面中的某個位置

iframe如何使用： https://www.cnblogs.com/huihuihero/p/11971841.html