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

您所在的位置：网站首页 › ios查看word › IPhone和安卓预览word和PDF文件之路

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

#IPhone和安卓预览word和PDF文件之路| 来源: 网络整理| 查看: 265

前言

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

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

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

解决方式 PDF在ios和安卓的预览安卓：PDF.JS（地址 github.com/mozilla/pdf… ）来解析pdf文件（自己的页面，可以转发分享，通过JS-SDK设置） IOS: 微信自带的预览功能（不能分享，因为这个页面是微信自己的，所以改不了），也可以改成PDFJS来实现跟安卓一样的（微信本身的如果图文复杂的word预览也会有点错乱） 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"> 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 { // 设置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() }) }) } } .file_preview { width: 100%; overflow: hidden; background-color: #ffffff; padding: 8px 10px; } .file_preview canvas { width: 100%; height: 100%; }

分析以上函数用到的方法

参考（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的问题，缺点是官网文档太过于精简了😂，不过以上基本已经可以实现大部分需求了。产品再给你提需求还怕吗！！😁

【本文地址】

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

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

今日新闻

推荐新闻