我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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
Plain text

相关代码目录总览

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.js是main.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);
});
JavaScript

整体上说来，上述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
      }
    })
  ]
};
JavaScript

相关链接

小结

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

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

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

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

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