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"}
相关推荐
拉不动的猪39 分钟前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪1 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom2 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom2 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom2 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
咖啡教室3 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室4 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀6 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
我不会编程5557 小时前
Python Cookbook-5.1 对字典排序
开发语言·数据结构·python