javascript - pdf.js不通过服务器如何像普通js文件引入使用

问题描述

问 题

需要实现在微信浏览器中直接预览PDF，一般情况下，一个服务器上的PDF文件在目前的微信里，IOS可以直接预览，但是Android不可以，而是提示下载或者在QQ浏览器中打开之类的。现在想实现直接在微信浏览器中预览。
查阅资料，比较好用的是pdf.js，但是它不像普通的jquery插件一样引入配置一下即可，在我的观察试验，需要node环境或者gulp dist等生成一个服务器，才能跑起来，gitHub 地址：https://github.com/mozilla/pd...
哪位大神能说说自己的使用经验，我想用example下面的mobile的样式和js,我怎么配置就可以使用静态的文件，主要是映射pdf.worker.js和我想要预览的pdf文件位置，这个是关键，有经验的给我分享下？！

还有补充，这样的实现方式感觉有点重，毕竟手机端处理要加载很多东西，文件又打，不如在服务器端处理返回，这样做合适吗？在服务器端，又要如何配置使用

解决方案

之前有点忙，现在来补充一下这个问题的解决方案：
由于发现在苹果手机的微信直接打来非常流畅，所以在苹果手机的微信打开服务器上的pdf时，不采用pdf.js，直接打开，这个解决方案是针对安卓手机在微信打开PDF，并直接在微信中预览（带着手机预览的样式）,不用通过QQ浏览器或者其他的软件打开。

其中../../public/images/h5.pdf是暂时用来做demo的一个pgf文件，存在images下

这样的话，用到了UA，在node中这样处理，

接下来来看页面中的引入情况，因为我使用的是pdf.js中example中手机直接打开的那种样式，这样自己就不用再花时间控制pdf的样式，大小和翻页等情况

静态js目录如下，就引进来就行

在pdfjs-dist下
build下，pdf.js和pdf.worker.js是肯定需要的，这是基本（worker文件不需要引入）；
web下，pdf_viewer.js和pdf_view.css是形成pdf样式所需要的文件，
以上这些，在任何其他的需要打开pdf，都是需要的
viewer.js,viewer.css就是这里手机显示的样式，这也是从那个example中的手机预览拿过来的，当然有些cmaps,images,就是人家要显示成那样的样式的辅助元素，要是需要显示成其他的样式，在example中有一些其他的，可以自己去找自己需要的。我是这么理解的。

页面如下，html结构直接就是官方的手机预览结构我一点都没有变，如下箭头指示的样式

下面是html代码，里面有文件引入情况，我这边js都统一放在静态js下的checkup的目录下

doctype html
html(lang="en")
    head
        title 内容查看
        meta(charset="UTF-8")
        meta(name='viewport', content='width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no')
        link(href="#{__JS_ROOT__}/checkup/pdfjs-dist/web/pdf_viewer.css",rel="stylesheet")
        link(href="#{__JS_ROOT__}/checkup/pdfjs-dist/viewer.css",rel="stylesheet")
        script( src="#{__JS_ROOT__}/checkup/pdfjs-dist/build/pdf.js").
        script( src = "#{__JS_ROOT__}/checkup/pdfjs-dist/web/pdf_viewer.js").
        script( src = "#{__JS_ROOT__}/checkup/pdfjs-dist/viewer.js").
    body
        header
        #viewerContainer
            #viewer.pdfViewer
        #loadingBar
            .progress
            .glimmer
        #errorWrapper(hidden='true')
            #errorMessageLeft
                span#errorMessage
                button#errorShowMore
                    | More Information
                button#errorShowLess
                    | Less Information
            #errorMessageRight
                button#errorClose
                    | Close
            .clearBoth
            textarea#errorMoreInfo(hidden='true', readonly='readonly')
        footer
            button#previous.toolbarButton.pageUp(title='Previous Page')
            button#next.toolbarButton.pageDown(title='Next Page')
            input#pageNumber.toolbarField.pageNumber(type='number', value='1', size='4', min='1')
            button#zoomOut.toolbarButton.zoomOut(title='Zoom Out')
            button#zoomIn.toolbarButton.zoomIn(title='Zoom In')
        script.
            var DEFAULT_URL = '/public/images/#{pdfSrc}.pdf';

特别的一点就是在页面中有

其中#{pdfSrc}就是从node中传过来的那个网址，现在写在页面里，作为全局变量存在，
找到这个url,然后去找对应的pdf文件，然后渲染，他本来是在viewer.js中和他们写在一起的，特此说明一下，图如下

其实其中最重要的一步，就是在viewer.js中配置pdf.worker.js的映射目录，让映射目录能找到，这都是静态的引用方式。但是要注意文件夹的名称和文件位置，不然会一直提示报错的。

在服务器的那种我也试过了，服务器那种通过gulp其实就是生成了目录映射，然后相互依赖映射，最终就可以渲染出pdf了。

使用静态的类似jquery插件的引入，原理是这样，一定要知道页面中引入的各个js的作用，静态的这种使用方式，里面如果有逻辑，就对应写在node中，找到你需要显示的pdf,我是一直拿一个作为测试使用的。

还有，这样的开销真的挺大的，pdj.js的几个关键文件大小都不可忽视，这对于网页加载是不利的，放在服务器上可能会好点，但是最终希望的是，安卓手机浏览器能够支持pdf直接预览。

这篇关于javascript - pdf.js不通过服务器如何像普通js文件引入使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！