前言：項目中提出這樣一個需求，在移動端H5頁面預覽pdf功能。pdf文件由后端返回的一個地址，前端實現(xiàn)展示預覽pdf文件

在此僅提供兩種方法：

一、使用iframe標簽通過src屬性直接展示pdf文件

? ? ? ? 坑點：兼容比較差，PC端能正常展示，移動端會出現(xiàn)空白的問題

<iframe src="這里是你的文件地址" height="900px;" width="800px"></iframe>

二、使用第三方插件pdfjs，PC端和移動端都能正常展示

1. 安裝插件：npm i pdfjs-dist

2. 引入插件：

// 以es5形式引入，解決低端瀏覽器兼容性問題
// 插件引入兩種方式：第一種引入如果出現(xiàn)報錯 environment lacks native support… 就改成第二種引入
// 第一種
const PDFJS = require("pdfjs-dist");
// 第二種
const PDFJS = require('pdfjs-dist/es5/build/pdf')

HTML部分：

<div>
	<canvas v-for="page in pdfPages" :key="page" :id="'pdf-canvas' + page" />
</div>

js部分，這里使用的vue2：文章來源地址http://www.zghlxwxcb.cn/news/detail-795176.html

data() {
    return {
		pdfPages: [], // 頁數(shù)
		pdfWidth: '', // 寬度
		pdfSrc: '', // 地址
		pdfDoc: '', // 文檔內容
		pdfScale: 1, // 放大倍數(shù)
		contractUrl: '', // 后端返回的PDF鏈接
		width: 500,
		height: 300,
  }
},

methods: {
	// 加載PDF文檔，url參數(shù)是后端返回的pdf文件地址
    loadFile(url) {
	    const loadingTask = PDFJS.getDocument(url)
		loadingTask.promise.then((pdf) => {
			this.pdfDoc = pdf
			this.pdfPages = pdf.numPages
		    this.$nextTick(() => {
			this.renderPage(1)
		     })
		}).catch((err) => {
			console.log(err, '打印錯誤')
		})
    },

   // 渲染PDF
   renderPage(num) {
        const that = this
		this.pdfDoc.getPage(num).then((page) => {
		const canvas = document.getElementById('pdf-canvas' + num)
		const ctx = canvas.getContext('2d')
		const dpr = window.devicePixelRatio || 1
		const ratio = dpr

		// 屏幕可用寬度，設置viewport為了屏幕適配問題
		const viewport = page.getViewport({scale: screen.availWidth / page.getViewport({ scale: this.pdfScale }).width })

		canvas.width = viewport.width * ratio
		canvas.height = viewport.height * ratio
		canvas.style.width = viewport.width - 30 + 'px'
		canvas.style.height = viewport.height + 'px'
		that.pdfWidth = viewport.width + 'px'
		canvas.style.height = viewport.height + 'px'
		ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
		// 將PDF頁面渲染到canvas上下文中
		const renderContext = {
		    canvasContext: ctx,
		    viewport: viewport
		}
		page.render(renderContext)
			if (this.pdfPages > num) {
				this.renderPage(num + 1)
			}
		})
	},
}

到了這里，關于前端實現(xiàn)PDF預覽【vue】的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！