iframe
在不使用插件的情况下，在线预览 PDF、PPT、Word 文件，大都可以直接使用 iframe 标签来嵌套，且提供的工具也相当丰富（上下页切换、全屏、下载、跳转到指定页数等），需要注意的是，在全屏模式下，展示的内容不能进行复制，且展示的最大高度是等于当前文档内容的高度（如果文档内容高度小于当前窗口的高度，那么多余的部分会以黑色背景铺满剩余的空间）。
优点：操作简单，一个标签即可解决展示的问题
缺点：低版本浏览器需要下载阅读器插件以及在不同浏览器下面文档的展示形式也不同（Safari 最明显），不支持事件对文档的操作
pdf.js
为了保证在不同浏览器下面的展示统一，这时可以考虑使用 mozilla 的 pdf.js 插件，在保持原有功能展示和统一了界面样式之外，还支持通过事件来操作文档，如通过事件控制上下页切换、全屏、跳转到指定页数等。
优点：在原有功能的基础上增加了事件的支持，样式也进行了统一
缺点：访问资源只能是同源（哪怕服务器设置了文档任何域都可以访问）插件还是会报错提示跨域的问题，文件体积过大
pdf.js 使用方法
1、先官网下载插件（
npm
、CDNs）
//npm
npm install pdfjs
//cdns
www.jsdelivr.com/package/npm/pdfjs-dist
cdnjs.com/libraries/pdf.js
unpkg.com/pdfjs-dist/
2、本地运行（基于引入js方式使用）
下载文件到本地之后，会有两个文件夹（web、build）其中内容展示的核心文件是 web/viewer.html，因为浏览器有同源策略，所以如果直接在本地浏览器打开 viewer.html 那么会发现页面什么也没有，最快的方法可以使用 http-server 来本地启动一个服务（http-server 简单使用方法在文章末尾处），启动服务之后，再次刷新页面，文档内容就能正常显示了（展示的文档内容是基于当前下载的 PDF 文件同级目录下面的 pdf文件）
3、动态修改 pdf 文件
以本地为例
192.168.1.6:8080/web/viewer.html
?file=test.pdf
以上链接可以划分为两部分
第一部分以
192.168.1.6:8080/web/viewer.html
为主的展示页面
第二部分以?file=test.pdf 为主的文档内容，test.pdf 为当前所处服务器目录下的文件（需要注意文件的路径）
192.168.1.6:8080/web/viewer.html
?file=a.pdf
192.168.1.6:8080/web/viewer.html
?file=/web/ppt/b.pdf
192.168.1.6:8080/web/viewer.html
?file=/static/file/c.pdf
4、使用过程中应当注意的问题
-
文档路径是否正确
-
是否使用其它域的文档数据
-
文件未展示且浏览器也没有报任何错误（需要考虑文档是否过大，导致下载很缓慢）
* 关于 http-server 的使用方法，可以参考如下（需要配合node）
1、进入需要启动服务器的目录
2、npm install
3、npm http-server
4、http-server
iframe在不使用插件的情况下，在线预览 PDF、PPT、Word 文件，大都可以直接使用 iframe 标签来嵌套，且提供的工具也相当丰富（上下页切换、全屏、下载、跳转到指定页数等），需要注意的是，在全屏模式下，展示的内容不能进行复制，且展示的最大高度是等于当前文档内容的高度（如果文档内容高度小于当前窗口的高度，那么多余的部分会以黑色背景铺满剩余的空间）。优点：操作简单，一个标签即可解...
首先要说的，IE浏览器简直是前端人的噩梦 ，每天一句辣鸡IE，下面我就把我大战IE三天的经历和大家一吐为快
1 梦开始
项目中要
使用
pdf
预览功能，当时我想：这个我熟阿，
pdf.js
绝对是首选技术，因为它兼容IE9版本以上，Chrome等主流浏览器更是没问题。于是去
pdf.js
官网直接找到主流版本2.5.207下载下来，经过一把soul后，最终在Chrome浏览器和IE浏览器打开都能正常预览，心里想：这事到这就算结束了
提一嘴：为什么说2.5.207是主流版本，因为该版本对IE的兼容性很好，不少文章都提到过
JS
PDF.JS
引入中文字库引入
js
pdf.js
写个简单的例子添加中文字库（ttf转
js
）直接引入ttf文件（未完成）
引入
js
pdf.js
github地址：https://github.com/MrRio/
js
PDF
引入在线的库
<script src="https://cdn
js
.cloudflare.com/ajax/libs/
js
pdf
/1.5.3/
js
pdf
.debug.
js
...
我们公司之前的需要实现的功能
pdf
上传、定位、浏览功能，这块主要我负责，就像上一个博客写的一样，遇到很多很多的问题，主要用到的
js
就是
pdf.js
,实现对上传
pdf
的浏览，上一个博客记录的是跨域问题（跨域问题是很重要的一个，因为一般文件服务器和项目服务器是分开的），下面记录一下如果实现的行定位功能。
本来我是不打算用行定位的，因为之前考虑了一下是完全没有头绪的，因为
pdf.js
...
一般生成的
PDF
文档默认的文档底色为白色，我们可以通过一定方法来更改文档的背景色，以达到文档美化以及保护双眼的作用。 以下内容提供了Java编程来设置
PDF
背景色的方法。包括：
设置纯色背景色
设置图片背景色
使用
工具
Free Spire.
PDF
for Java 2.0.0（免费版）
注：2.0.0版本的比之前1.1.0版本在功能上做了很大提升，支持所有收费...
再做项目中遇到了需要导出
pdf
的功能,遇到很多问题包括html2canvas截屏不全,
js
Pdf
导出文字图片不展示-内容错位-背景黑色-
js
Pdf
超过一页被分割等问题,就是把我的解决方案写在这给大家点思路和便利。
1.html2canvas和
js
Pdf
简单介绍
一.html2canvas
html2canvas官网
npm引入方式 npm insatll --s...
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.
js
"></script>
<script src="https://cdn.bootcss.com/
js
pdf
/1.3.4/
js
pdf
.debug.
js
"></script>
<div id="...
Vue.
js
与
PDF.js
结合
使用
可以实现在Vue项目中展示和操作
PDF
文件的功能。下面是
使用
步骤：
1. 安装
pdf.js
库：
使用
npm或者yarn命令安装
pdf.js
库，可以执行如下命令：
npm install
pdf
js
-dist
2. 创建
PDF.js
组件：在Vue项目中创建一个
PDF
Viewer.vue组件用于展示
PDF
文件。可以按照如下方式创建组件：
```vue
<template>
<canvas ref="canvas"></canvas>
</template>
<script>
import
pdf
js
from '
pdf
js
-dist';
export default {
mounted() {
this.load
PDF
();
methods: {
async load
PDF
() {
const
pdf
Url = 'path/to/
pdf
/file.
pdf
';
const
pdf
Doc = await
pdf
js
.getDocument(
pdf
Url).promise;
const page = await
pdf
Doc.getPage(1);
const canvas = this.$refs.canvas;
const context = canvas.getContext('2d');
const viewport = page.getViewport({ scale: 1 });
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
await page.render(renderContext);
</script>
3.
使用
PDF
Viewer组件：在需要展示
PDF
文件的页面中
使用
PDF
Viewer组件。比如，在App.vue中引入
PDF
Viewer组件：
```vue
<template>
<div id="app">
<
PDF
Viewer />
</template>
<script>
import
PDF
Viewer from './components/
PDF
Viewer.vue';
export default {
components: {
PDF
Viewer
</script>
注意：以上代码仅展示了
PDF.js
与Vue的基本结合
使用
，更详细的
PDF.js
使用
方法和功能可以参考
PDF.js
官方文档。
