PDF.js介绍以及使用

这里写目录标题

下载

官网地址

下载最新版浏览器版本。

放入项目内

我这是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"}
相关推荐
我是苏苏9 分钟前
消息中间件RabbitMQ02:账号的注册、点对点推送信息
开发语言·后端·ruby
华洛10 分钟前
从0到1打造企业级AI售前机器人——实战指南二:RAG工程落地之数据处理篇🧐
前端·javascript·vue.js
工藤新一¹26 分钟前
C++/SDL 进阶游戏开发 —— 双人塔防(代号:村庄保卫战 14)
开发语言·c++·游戏引擎·游戏开发·sdl·实践项目
啊波次得饿佛哥34 分钟前
在winform中使用chromiumWebBrowser显示Echarts图表
前端·javascript·echarts·winform·cefsharp
钢铁男儿34 分钟前
C#核心技术解析:静态类型、dynamic与可空类型
开发语言·c#
秋天的一阵风1 小时前
🌈尘埃落定!ECMASCRIPT 2025 标准来袭,开发者的新福音🎁
前端·javascript·ecmascript 8
卓越进步1 小时前
层级时间轮的 Golang 实现原理与实践
开发语言·后端·golang
zandy10111 小时前
嵌入式BI开发指南:如何通过衡石API将分析能力集成到业务系统?
开发语言·python·嵌入式
沉迷...1 小时前
el-input限制输入只能是数字 限制input只能输入数字
开发语言·前端·elementui
<但凡.1 小时前
C++修炼:list模拟实现
开发语言·数据结构·c++