Hello,大家周末好，最近在寫項目中遇到了手機端預覽pdf的問題今天在這里給大家分享一下。

我遇到的問題分為2種：ios：X一下的機型使用window.open來在手機端打開不能滑動文件，X以上機型就可以正常滑動文件安卓：點擊直接是下載下來到手機上的可以說是不能正常查看的。

解決方法：

先下載依賴：cnpm install pdfjs-dist --save然后：//這是封裝的組件，使用就很簡單只需要穿一個 url 參數也就是pdf的鏈接然后根據項目需求來控制組件的顯示和隱藏<template><div id="container"><canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas></div></template><script>import PDFJS from 'pdfjs-dist'export default {props:['url'],data () {return {title: '',pdfDoc: null,loadding: false,pages: 0}},methods: {renderPage (num) {let _this = thisthis.pdfDoc.getPage(num).then(function (page) {let canvas = document.getElementById('the-canvas' + num)let ctx = canvas.getContext('2d')let dpr = window.devicePixelRatio || 1let bsr = ctx.webkitBackingStorePixelRatio ||ctx.mozBackingStorePixelRatio ||ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio ||ctx.backingStorePixelRatio || 1let ratio = dpr / bsrvar viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)canvas.width = viewport.width * ratiocanvas.height = viewport.height * ratiocanvas.style.width = viewport.width + 'px'canvas.style.height = viewport.height + 'px'ctx.setTransform(ratio, 0, 0, ratio, 0, 0)var renderContext = {canvasContext: ctx,viewport: viewport}page.render(renderContext)if (_this.pages > num) {_this.renderPage(num + 1)}})},loadFile (url) {let _this = thisPDFJS.getDocument(url).then(function (pdf) {_this.pdfDoc = pdf_this.pages = _this.pdfDoc.numPages_this.$nextTick(() => {_this.renderPage(1)})})}},mounted () {this.loadFile(this.url);}}</script><style scoped>canvas {display: block;border-bottom: 1px solid black;}</style>

總結

以上是生活随笔為你收集整理的手机端预览pdf的那些事的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。