在uniapp中使用pdfjs在线预览pdf

最新推荐文章于 2024-07-09 18:04:30 发布

minx_6688

最新推荐文章于 2024-07-09 18:04:30 发布

阅读量5k

点赞数 1

分类专栏： uniapp

本文链接：https://blog.csdn.net/mwh_user/article/details/112368597

版权

uniapp 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

pdfjs下载地址（下载es5版本）
http://mozilla.github.io/pdf.js/getting_started/#download
文末有我的demo代码，大家有兴趣的话可以下载来看看

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

<script>
	export default {
		data() {
			return {
				// pdf.js的viewer.html所在路径
				// 注意：静态的html文件需要放在根路径下的 hybrid/html 文件夹中
				base_url : '/hybrid/html/web/viewer.html',
				// 要访问的pdf的路径 file_url
				/*
				访问的时候会遇到跨域问题
				解决方法一、
					1. /hybrid/html/web/viewer.js 中注释掉这3行代码  
					 if (origin !== viewerOrigin && protocol !== "blob:") {
					   throw new Error("file origin does not match viewer's");
					   
					 }
					2. 你存放pdf文件的这个服务器 需要做好跨域配置
						例如： 我现在访问的是 8.129.221.250 这个服务器 8.129.221.250 这个服务器是 nginx 服务器
						那么 我需要在 nginx 的配置文件中做如下操作
						location / {
						  add_header Access-Control-Allow-Origin '*';
						  add_header Access-Control-Allow-Methods 'GET, POST, PUT, OPTIONS';
						  add_header Access-Control-Expose-Headers 'Accept-Ranges, Content-Encoding, Content-Length, Content-Range';
						}
				解决方法二、后端获取文件流的方式  请各位自行百度吧
				*/
			   
				file_url: 'http://8.129.221.250/img/1.pdf',// 这个pdf文件比较大，而且我的服务器带宽又小 所以加载pdf的时候会有点慢
				// 最终显示在web-view中的路径
				url: ''
			}
		},
		onLoad() {
			// h5 和 安卓
			this.url = `${this.base_url}?file=${encodeURIComponent(this.file_url)}`;
			console.log(this.url)
			// ios，直接访问pdf所在路径
			// this.url = encodeURIComponent(this.file_url);
			// 小程序平台 我没有测试过  也不知道可不可行
		},
		methods: {
			
		}
	}
</script>

<style>

</style>