在uniapp中使用pdfjs在线预览pdf

最新推荐文章于 2025-03-13 11:31:17 发布

minx_6688

最新推荐文章于 2025-03-13 11:31:17 发布

阅读量5.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uniapp

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

uniapp 专栏收录该内容

12 篇文章

订阅专栏

博客提供了pdfjs的下载地址，可下载es5版本，链接为http://mozilla.github.io/pdf.js/getting_started/#download 。同时文末还分享了demo代码，其百度网盘链接为https://pan.baidu.com/s/1jKvlxWAR5HY4k-cEMqrScw ，提取码是abcd，另有相关博客链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>