我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

pdfjs的代码看起来不难。不过,却不得不吐槽相关的demo例子,写的蛮不清晰的。上一篇demo是helloworld,本篇的例子是pdfjs的webpack例子。

苏南大叔:如何利用webpack构建pdfjs,并加载pdf文件? - pdfjs-pdf
如何利用webpack构建pdfjs,并加载pdf文件?(图8-1)

pdfjs源码中,webpack的例子,和helloword例子有些类似,但是一样不太好理解。在webpack中如何使用pdfjs呢?请查看本文中的内容。

相关环境

要理解pdfjs的webpack例子,就要先搭建基本环境。

首先,大家请下载pdfjs的github代码master分支:

环境的搭建命令,简要说明如下。详细的搭建内容,可以参加文末链接。

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文件?(图8-2)

苏南大叔:如何利用webpack构建pdfjs,并加载pdf文件? - 1_pdfjs-path
如何利用webpack构建pdfjs,并加载pdf文件?(图8-3)

苏南大叔:如何利用webpack构建pdfjs,并加载pdf文件? - 2_pdfjs-path
如何利用webpack构建pdfjs,并加载pdf文件?(图8-4)

苏南大叔:如何利用webpack构建pdfjs,并加载pdf文件? - 3_pdfjs-path
如何利用webpack构建pdfjs,并加载pdf文件?(图8-5)

  • 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文件?(图8-6)

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

苏南大叔:如何利用webpack构建pdfjs,并加载pdf文件? - webpack_build
如何利用webpack构建pdfjs,并加载pdf文件?(图8-7)

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

苏南大叔:如何利用webpack构建pdfjs,并加载pdf文件? - webpack加载pdfjs的范例最终效果
如何利用webpack构建pdfjs,并加载pdf文件?(图8-8)

主体代码

这个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/

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

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