Pdfjs使用

标签: Pdfjs 分类: Javascript 创建时间:2019-07-19 07:20:59 更新时间:2025-01-17 10:39:22

好记性不如烂笔头。
今天同事问我,如何在手机端显示pdf文件,我张口就来使用 pdfjs 啊,怎么用?我蒙了,说实话,我当时使用pdfjs的时候,确实还是废了一番周折的,后来项目结束,什么都不记得了。(对我的未来担忧啊!),今天再看看原先的代码,整理一下。
如果你去官网查看的话,其实上面很乱的,根本不能一下就找到如何快速的使用pdfjs。

1.下载perbuild版本

getting_started ,下载下来会有两个文件夹一个是build,一个是web文件夹。web文件夹下有个viewer.html,这个就是主角了。

2.预览pdf

viewer.html把基本的上一页下一页等按钮都搭建好了,只需要传入一个file参数即可,例:“../web/viewer.html?file=web/test.pdf”,要保证file这个文件可达,也可以使用网络路径或者相对路径。

3.配合后台

使用pdfjs,一般都是需要后台的,起码这个file参数的文件要能够通过服务器访问道。这里已spring boot为例说明:

下载安装:

下载Pre-build版本,解压后,将解压出的web文件夹(内含viewer.html)和build文件夹(内含pdf.js和pdf.worker.js),拷贝到src/main/resource/pdfjs文件夹下, 完成pdfjs的安装。

1
pnpm add pdfjs-dist

添加资源映射

将pdfjs放到了resource文件夹下了,要让外部可以访问到。继承WebMvcConfigurerAdapter,重写addResourceHandlers方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import cn.zjch.common.support.JSON.JsonReturnHandler;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.method.support.HandlerMethodReturnValueHandler;
import org.springframework.web.servlet.config.annotation.*;

import java.util.List;

/**
* Created by zjch on 2017/7/24.
*/
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter{
private static final Logger logger = LogManager.getLogger(WebConfig.class);
//设置跨域操作
// @Override
// public void addCorsMappings(CorsRegistry registry) {
// registry.addMapping("/**")
// .allowedHeaders("*")
// .allowedMethods("*")
// .allowedOrigins("*");
// }
//添加静态资源的映射
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/pdfjs/**").addResourceLocations("classpath:/pdfjs/");
super.addResourceHandlers(registry);
}
//设置路由匹配模式
@Override
public void configurePathMatch(PathMatchConfigurer configurer) {
configurer.setUseSuffixPatternMatch(false);
}
}

至于file这个参数的文件地址,无论使用相对目录还是网络路径,应该保证可以获取到。我使用了”/pdfjs/web/viewer.html?file=static/resource/“,当然static也是做过资源映射了。

其他人的文章:
【1】.pdf.js的使用实例:https://www.jianshu.com/p/9cd4840f9323
【2】.关于使用pdfjs预览PDF文件:https://www.jianshu.com/p/df5f9726cbbf

总是提示没有安装

在一个新的电脑上执行了 pnpm install 之后,总是提示要安装:npm install pdfjs-dist。后来解决方法也非常的奇怪,一会安装了,卸载了,一会又remove,最后又不弹出问题了,真是奇怪。

参考文章:
【1】.直接引入pdfjs-dist会报错 2.8.335版本之前引入方式和之后引入方法不同
【2】.Vue使用pdfjs-dist遇到的坑 安装失败:npm install 报错 npm ERR code ERESOLVE npm ERR ERESOLVE unable to resolve dependency tree
【3】.vue引入pdfjs-dist 2.8.335版本之后报错
小额赞助
本人提供免费与付费咨询服务,感谢您的支持!赞助请发邮件通知,方便公布您的善意!
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别?

1.函数 isNaN 接收参数后,会尝试将这个参数转换为数值,任何不能被转换为数值的的值都会返回 true,因此非数字值传入也会返回 true ,会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字,如果是数字再继续判断是否为 NaN ,不会进行数据类型的转换,这种方法对于 NaN 的判断更为准确。

每日二省
为什么0.1+0.2 ! == 0.3,如何让其相等?

一个直接的解决方法就是设置一个误差范围,通常称为“机器精度”。对JavaScript来说,这个值通常为2-52,在ES6中,提供了Number.EPSILON属性,而它的值就是2-52,只要判断0.1+0.2-0.3是否小于Number.EPSILON,如果小于,就可以判断为0.1+0.2 ===0.3。

每日三省
== 操作符的强制类型转换规则?

1.首先会判断两者类型是否**相同,**相同的话就比较两者的大小。

2.类型不相同的话,就会进行类型转换。

3.会先判断是否在对比 null 和 undefined,是的话就会返回 true。

4.判断两者类型是否为 string 和 number,是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean,是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol,是的话就会把 object 转为原始类型再进行判断。

每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀,微笑是寂寞的悲伤。