如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

pdfjs的代码看起来不难。不过,却不得不吐槽相关的demo例子,写的蛮不清晰的。上一篇demo是helloworld,本篇的例子是pdfjs的webpack例子。在pdfjs源码中,webpack的例子,和helloword例子有些类似,但是一样不太好理解。在webpack中如何使用pdfjs呢?请查看本文中的内容。

相关环境

要理解pdfjs的webpack例子,就要先搭建基本环境。首先,大家请下载pdfjs的github代码master分支, https://github.com/mozilla/pdf.js 。环境的搭建命令,简要说明如下。详细的搭建内容,可以参加文末链接。

cd pdf.js-master
npm install
npm install -g gulp-cli
gulp server

相关代码目录总览

pdfjs的webpack例子,位置是:/examples/webpack/,几点说明如下:

  • 在webpack例子的根目录(/examples/webpack/)下,需要主动npm i安装相关依赖包。
  • package.json里面的依赖包pdfjs-dist的定义,并没有按常理出牌。没有定义pdfjs-dist为某个版本号,而是定义了一个路径。而这个路径对应的js,是在根目录下面用gulp server生成的。当然,您也可以修改这个定义为版本号,那么就会从GitHub仓库里面下载这个代码了。

如何利用webpack构建pdfjs加载pdf文件 - 0_pdfjs-path

如何利用webpack构建pdfjs加载pdf文件(图7-1)

如何利用webpack构建pdfjs加载pdf文件 - 1_pdfjs-path

如何利用webpack构建pdfjs加载pdf文件(图7-2)

如何利用webpack构建pdfjs加载pdf文件 - 2_pdfjs-path

如何利用webpack构建pdfjs加载pdf文件(图7-3)

如何利用webpack构建pdfjs加载pdf文件 - 3_pdfjs-path

如何利用webpack构建pdfjs加载pdf文件(图7-4)

  • webpack这个例子中,pdf文件默认加载的是同级目录helloword中的helloword.pdf,所以,要展示的主角pdf,是脱离这个webpack目录的。
  • 安装好项目依赖后,需要主动执行webpack,生成上述三个js文件。您可以执行例子目录下的webpack模块,或者全局的模块,需要注意的是:不同的操作系统下,分隔符的写法。
mac环境局部node_modules/.bin/webpack
win环境局部node_modules\.bin\webpack
全局通用webpack

如何利用webpack构建pdfjs加载pdf文件 - 4_pdfjs-path

如何利用webpack构建pdfjs加载pdf文件(图7-5)

  • 最主要的的*.bundle.js,也是脱离这个webpack例子目录的,并且是需要主动执行webpack命令生成的。位于项目根目录下面的:build/webpack/之中,而且默认有三个bundle的js文件。1.1.bundle.jsmain.bundle.js连带生成的,作用未知。

如何利用webpack构建pdfjs加载pdf文件 - webpack_build

如何利用webpack构建pdfjs加载pdf文件(图7-6)

  • webpack的demo访问地址是:http://localhost:8888/examples/webpack/index.html,这个时候,做server的其实是gulp,实际上webpack自己就可以做server的....,webpack在这个例子中的使用方式,是有些憋屈的。

如何利用webpack构建pdfjs加载pdf文件 - webpack加载pdfjs的范例最终效果

如何利用webpack构建pdfjs加载pdf文件(图7-7)

主体代码

这个webpack的例子和helloworld的例子,效果看上去基本一致。都是加载helloword.pdf的第一页内容,并没有任何的特殊功能及效果。

main.js 代码如下:

var pdfjsLib = require('pdfjs-dist');
var pdfPath = '../helloworld/helloworld.pdf';

// Setting worker path to worker bundle.
pdfjsLib.GlobalWorkerOptions.workerSrc =
  '../../build/webpack/pdf.worker.bundle.js';

// Loading a document.
var loadingTask = pdfjsLib.getDocument(pdfPath);
loadingTask.promise.then(function (pdfDocument) {
  // Request a first page
  return pdfDocument.getPage(1).then(function (pdfPage) {
    // Display page on the existing canvas with 100% scale.
    var viewport = pdfPage.getViewport(1.0);
    var canvas = document.getElementById('theCanvas');
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    var ctx = canvas.getContext('2d');
    var renderTask = pdfPage.render({
      canvasContext: ctx,
      viewport: viewport
    });
    return renderTask.promise;
  });
}).catch(function (reason) {
  console.error('Error: ' + reason);
});

整体上说来,上述js基本上和hellword的逻辑类似,细节上略有不同。

webpack配置

传说中的webpack4版本是零配置的,但是目前来说,3系列webpack还是需要配置文件的。下面的webpack的配置项目含义不做解释。

var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: __dirname,
  entry: {
    'main': './main.js',
    'pdf.worker': 'pdfjs-dist/build/pdf.worker.entry'
  },
  output: {
    path: path.join(__dirname, '../../build/webpack'),
    publicPath: '../../build/webpack/',
    filename: '[name].bundle.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        screw_ie8: true,
        warnings: false
      }
    })
  ]
};

相关链接

小结

这个webpack的例子中,pdf文件,也仅仅加载了第一页,没有任何酷炫的功能按钮。所以,可参考性也不大。 更多苏南大叔的pdfjs经验文章,请点击这里的链接查看。 https://newsn.net/tag/pdfjs/

  【webpack】秘籍文章入口,仅传授于有缘之人  webpack    pdf

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

打赏任意金额,发送截图到邮箱 shang@newsn.net ,可以领取精选回馈如下(任选其一):
  • 《前端视频教程大礼包》一套
  • 《wordpress精选皮肤》一套
  • 《dedecms织梦精选模板》一套
感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!

岁月静好

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/pdfjs-demo-webpack.html
上一篇好文:以cmswing为例,如何定制thinkjs的log日志
下一篇好文:chrome如何一键清除历史记录及页面缓存

如果您转载了本文章,出于某种原因,并没有注明作者或者出处。
在这里,苏南大叔也表示理解和支持。因为苏南大叔深深地明白:
您会在合适的时机,合适的地方,给本博客一个外链。对吧?
您若开心,便是安好!岁月静好,但愿世界和平,没有纷争~