IPhone和安卓预览word和PDF文件之路

前言

这篇文章主要是为了总结一下最近作微信内置浏览器预览文件😁(word和pdf)在不一样操做系统的问题。在IPhone微信内置浏览器中，基本能够预览各式各样的文件格式，可是在安卓就不行了，打开文件地址就跳转到浏览器下载页面了。如下就是本人的踩坑之路。

~~敢问路在何方，路就在脚下

官网demo（ mozilla.github.com/pdf.js/web/… ），其原理是绘制成canvas

解决方式

1. PDF在ios和安卓的预览

• 安卓：PDF.JS（地址 github.com/mozilla/pdf… ） 来解析pdf文件（本身的页面，能够转发分享，经过JS-SDK设置）
• IOS: 微信自带的预览功能（不能分享，由于这个页面是微信本身的，因此改不了），也能够改为PDFJS来实现跟安卓同样的（微信自己的若是图文复杂的word预览也会有点错乱）

2. Word在ios和安卓的预览

• 后端将word转成PDF文件，前端在经过PDF实现ios和安卓的预览
• 后端能够转换成图片，这样就能够直接渲染了
  注：前端我暂时没找到好的办法将word转换成PDF😁，因此经过后端转换来实现。后端用linux转的话若是图文比较复杂的话会出现图文错乱的问题，因此建议经过购买Window系统的服务器来转换（坑）,也能够在阿里云市场购买服务（👀不太推荐，仍是有点小贵的）

PDFJS准备工做

• pdf.js能够从github上clone下来，而后本地gulp生成可用的pdf.js和pdf.worker.js（参考readme便可）。不过，本人推荐仍是用npm安装，npm install pdfjs-dist --S,而后在项目中经过import PDFJS from 'pdfjs-dist引用就能够用了
• pdf.js不能处理跨域文件和本地文件，因此本地调试的时候应该请求服务器的文件，若是请求的是远程服务器，存在跨域，那就须要在config/index.js中配置一下代理

proxyTable: {
      '/media': {
        target: 'https://xxxx.cn', // 换成正确的服务器域名
        changeOrigin: true,
        pathRewrite: {
          '^/media': '/media'
        }
      }
    }
原文：https://blog.csdn.net/u010419337/article/details/79535131
复制代码

这样的话请求里面包含media的会被替换成target那个域名，OK，完美👌

核心代码

项目安装好pdfjs-dist后就经过下面代码引入文件

import PDFJS from 'pdfjs-dist'
import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
import 'pdfjs-dist/web/pdf_viewer.css'
PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'
复制代码

一和四这两个文件包含了获取、解析和展现PDF的方法，可是解析和渲染PDF须要较长的时间，因此pdfjs经过依赖HTML5的web Worker，从而从主线程中移除大量的CPU操做来提高性能。 二和三的文件主要是为了来实现渲染出来的pdf能够复制里面的文字，也至关于将里面的图文用真实的文字和图片经过html渲染出来。若是没有这一步的话生成的是一个个canvas

// 页面上写个容器
div class="file_preview" ref="filePreview">
    <div id="container"></div>
</div>
复制代码

let container
let url = '你的pdf文件地址.pdf'（线上环境真实存在的文件）

// 经过getDocument以块的形式请求文档，返回Promise
PDFJS.getDocument(url).then((pdf) => {
    // 获取容器
    container = document.getElementById('container')
    // 获取pdf的总页数
    let num = pdf.numPages
    // 执行核心解析和渲染代码
    this.renderPDF(pdf, num)
  }).catch(err => {
    console.log(err)
  })
复制代码

解析渲染函数

renderPDF (pdf, num) {
      for (let i = 1; i<= num; i++) {
        let pageDiv
        pdf.getPage(i).then((page) => {
         // 设置PDF尺寸，若是渲染出来的模糊的话这个稍微能够调大点，可是要给容器的canvas设置个样式，本人亲测过,以下样式设置
          var viewport = page.getViewport(2)
          pageDiv = document.createElement('div')
          pageDiv.setAttribute('id', 'page-' + (page.pageIndex + 1))
          pageDiv.setAttribute('style', 'position: relative')
          container.appendChild(pageDiv)
          var canvas = document.createElement('canvas')
          pageDiv.appendChild(canvas)
          var context = canvas.getContext('2d')
          canvas.width = viewport.width
          canvas.height = viewport.height
            
          var renderContext = {
              canvasContext: context,
              viewport: viewport
          };
          page.render(renderContext).then(() => {
            // 返回PDF页面上的文本片断，为了实现文本复制
            return page.getTextContent()
          }).then((textContent) => {
            // 建立文本图层div
            const textLayerDiv = document.createElement('div')
            textLayerDiv.setAttribute('class', 'textLayer')
            // 将文本图层div添加至每页pdf的div中
            pageDiv.appendChild(textLayerDiv)
            
            // 建立新的TextLayerBuilder实例
            var textLayer = new TextLayerBuilder({
                textLayerDiv: textLayerDiv,
                pageIndex: page.pageIndex,
                viewport: viewport
            })         
            textLayer.setTextContent(textContent)       
            textLayer.render()
          })
        })
      }
    }
复制代码

<style scoped>
.file_preview {
  width: 100%;
  overflow: hidden;
  background-color: #ffffff;
  padding: 8px 10px;
}
</style>
<style>
.file_preview canvas {
  width: 100%;
  height: 100%;
}
</style>
复制代码

分析以上函数用到的方法

参考（www.cnblogs.com/lalalagq/p/… ）

• getDocument()：用于异步获取PDf文档，发送多个Ajax请求以块的形式下载文档。它返回一个Promise，该Promise的成功回调传递一个对象，该对象包含PDF文档的信息，该回调中的代码将在完成PDf文档获取时执行
• getPage()：用于获取PDF文档中的各个页面
• getViewport()：针对提供的展现比例，渲染PDF的页面尺寸
• render()：渲染PDF

文本复制

以上引入的第三和第四个文件，就是用来解决文本复制的问题，经过使用Text-Layer来渲染。PDF.js支持在使用Canvas渲染的PDF页面上渲染文本图层。然而，这个功能须要用到额外的两个文件：text_layer_builder.js和text_layer_builder.css，引入这两个文件

import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
import 'pdfjs-dist/web/pdf_viewer.css'
复制代码

主要代码如上“解析和渲染函数”

PDF.JS核心API的做用

• page.render()：返回一个当PDF成功渲染到页面上时的Promise，能够经过使用成功回调来渲染文字图层
• page.getTextContent()：得到PDF页面上的文本片断
• TextLayerBuilder：有两个重要的方法，setTextContent()用于设置page.getTextContent()函数返回的文本片断；render()用于渲染文本图层

总结

强大的PDF.JS基本实现了预览PDF的问题，缺点是官网文档太过于精简了😂，不过以上基本已经能够实现大部分需求了。产品再给你提需求还怕吗！！😁