uniapp 使用pdf.js 加载本地pdf文件报错问题

        最近有在做一个移动端的应用,应用里涉及到大量的js游戏开发,使用Android原生做不太合适,就选择了uniapp,其中有一个功能是读取本地的pdf文件并展示。在网上查了点资料都是用pdf.js来开发,具体的实现方式大家可以参考 http://mozilla.github.io/pdf.js/getting_started/   

<template>
	<view class="content"><web-view :src="url"></web-view></view>
</template>

<script>
export default {
	data() {
		return {
			// pdf.js的viewer.htm所在路径
			// 注意:静态的html文件需要放在根路径下的 hybrid/html 文件夹中
			viewerUrl: '/hybrid/html/web/viewer.html',
			// 要访问的pdf的路径
			fileUrl: 'http://*******',
			// 最终显示在web-view中的路径
			url: ''
		};
	},
	onLoad() {
		// h5,使用h5访问的时候记得跨域
		// #ifdef H5
		this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}`;
		// #endif
		// 在安卓和ios手机上
		// 判断是手机系统:安卓,使用pdf.js
		// #ifdef APP-PLUS
		// console.log(plus.os.name )
		if(plus.os.name === 'Android') {
			this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}`;
			console.log(this.url  )
		}
		// ios,直接访问pdf所在路径
		else {
			this.url = encodeURIComponent(this.fileUrl);
		}
		// #endif
	},
	methods: {}
};
</script>

<style>
</style>

这里fileUrl是在线文档地址是没问题的如 http://***.pdf 可以直接显示,只有加载速度的问题,但是如果是本地的文件的话,会报错,显示文件不存在,这时需要做如下的修改把本地URL路径转换成平台绝对路径 api :  convertLocalFileSystemURL

<template>
	<view class="content"><web-view :src="url"></web-view></view>
</template>

<script>
export default {
	data() {
		return {
			// pdf.js的viewer.htm所在路径
			// 注意:静态的html文件需要放在根路径下的 hybrid/html 文件夹中
			viewerUrl: '/hybrid/html/web/viewer.html',
			// 要访问的pdf的路径
			fileUrl: '/static/1.pdf',
			// 最终显示在web-view中的路径
			url: ''
		};
	},
	onLoad() {
		// h5,使用h5访问的时候记得跨域
		// #ifdef H5
		this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}`;
		// #endif
		// 在安卓和ios手机上
		// 判断是手机系统:安卓,使用pdf.js
		// #ifdef APP-PLUS
		// console.log(plus.os.name )
		if(plus.os.name === 'Android') {
            //将本地URL路径转换成平台绝对路径
			this.fileUrl = plus.io.convertLocalFileSystemURL(this.fileUrl)
			this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}`;
			console.log(this.url  )
		}
		// ios,直接访问pdf所在路径
		else {
			this.url = encodeURIComponent(this.fileUrl);
		}
		// #endif
	},
	methods: {}
};
</script>

<style>
</style>

这样pdf.js 加载显示本地pdf文件就没问题了

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
UniApp是一个基于Vue.js开发的跨平台应用框架,可以同时开发iOS、Android和Web应用。要在UniApp使用pdf.js,可以按照以下步骤进行操作: 1. 首先,需要在UniApp项目中安装pdf.js库。你可以使用npm来安装pdf.js,具体命令如下: ``` npm install pdfjs-dist ``` 2. 安装完成后,在你的Vue组件中引入pdf.js库: ```javascript import pdfjsLib from 'pdfjs-dist' ``` 3. 接下来,你可以使用pdf.js提供的API来加载和显示PDF文件。以下是一个简单的示例: ```javascript export default { data() { return { pdf: null, currentPage: 1, totalPages: 0 } }, mounted() { // 加载PDF文件 this.loadPDF() }, methods: { async loadPDF() { const pdfUrl = 'path/to/your/pdf/file.pdf' // 使用pdf.js加载PDF文件 const loadingTask = pdfjsLib.getDocument(pdfUrl) const pdf = await loadingTask.promise this.pdf = pdf this.totalPages = pdf.numPages // 显示第一页 this.showPage(this.currentPage) }, async showPage(pageNumber) { if (!this.pdf) return // 获取指定页的渲染对象 const page = await this.pdf.getPage(pageNumber) // 创建一个canvas元素用于渲染PDF内容 const canvas = document.createElement('canvas') const context = canvas.getContext('2d') // 设置canvas的大小 const viewport = page.getViewport({ scale: 1 }) canvas.width = viewport.width canvas.height = viewport.height // 渲染PDF内容到canvas const renderContext = { canvasContext: context, viewport: viewport } await page.render(renderContext).promise // 将canvas添加到页面中显示 document.body.appendChild(canvas) } } } ``` 上述示例代码中,`loadPDF()`方法用于加载PDF文件,`showPage(pageNumber)`方法用于显示指定页的内容。你可以根据自己的需求进行修改和扩展。 这样,你就可以在UniApp使用pdf.js加载和显示PDF文件了。记得确保你已经在项目中添加了对应的PDF文件,并使用正确的路径来引用它。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值