PDF.js介绍以及使用

小和尚敲木头2024-04-21 18:47

这里写目录标题

下载
放入项目内
加载pdf文件
其他问题
- 加载远程文件跨域
- 中文语言

下载

官网地址

下载最新版浏览器版本。

放入项目内

我这是uniapp项目放入了 static vue 项目可以放入public内

build 是源码库 web 内是写好的一个类似pdf编辑器的完整项目

加载pdf文件

html 复制代码

// 组件 使用 iframe之类的标签引入新的页面
<template>
	<view class="main-containers">
		<web-view :webview-styles="webviewStyles" :src="iframe"></web-view>
	</view>
</template>
<script>
	import config from "@/config"
	export default {
		data() {
			return {
				 iframe: "",
				 webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				}
			};
		},
		props: {
		    isSelf:{
		      type: Boolean,
		      default: true
		    }
		},
		onLoad(opts) {
			if (opts.pdfUrl){
				this.loadFrame(opts.pdfUrl)
			}
		},
		mounted() {
		  },
		methods:{
			loadFrame(pdfUrl){
			    this.iframe = "/static/pdfjs/web/viewer.html?file="+config.baseUrl+pdfUrl+"&ver="+Date.now(); // file 是文件地址
			},
		}
	}
</script>

<style lang="scss">
.main-containers {
  margin-left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

其他问题

加载远程文件跨域

js 复制代码

// 找到源码地址 直接删除代码
 if (fileOrigin !== viewerOrigin) {
        throw new Error("file origin does not match viewer's");
      }

中文语言

html 复制代码

// viewer.html
<link rel="resource" type="application/l10n" href="locale/locale.json">
<!--<link rel="resource" type="application/l10n" href="locale/zh-CN/viewer.ftl">--> 无法直接使用

修改web/locale/locale.json ,"zh-cn":"zh-CN/viewer.ftl" 放在首位

json 复制代码

{"zh-cn":"zh-CN/viewer.ftl","ach":"ach/viewer.ftl", ...  ,"zh-tw":"zh-TW/viewer.ftl"}