mol-pdf 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 wangdaodao
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,168 @@
+# Cafe-PDF
+
+![NPM Publish](https://github.com/wangdaodao/cafe-pdf/actions/workflows/npm-publish.yml/badge.svg) ![NPM version](https://img.shields.io/npm/v/cafe-pdf.svg) ![GitHub stars](https://img.shields.io/github/stars/wangdaodao/cafe-pdf.svg) ![GitHub issues](https://img.shields.io/github/issues/wangdaodao/cafe-pdf.svg) ![GitHub forks](https://img.shields.io/github/forks/wangdaodao/cafe-pdf.svg)
+
+> Render PDF files on Vue pages using pdf.js, supporting text rendering, lazy loading, paging, scaling, and printing.
+
+* 😊 Vue 2.0 + [`pdfjs-dist 2.3.200`](https://github.com/mozilla/pdfjs-dist/releases/tag/v2.3.200);
+* 😂 Support for modern browsers;
+* 🀄 [中文文档](./README-zh.md)
+
+## Install
+
+```shell
+npm install cafe-pdf --save
+```
+
+## Quick Start
+```js
+import cafePdf from 'cafe-pdf'
+import 'cafe-pdf/package/cafe-pdf.css'
+Vue.use(cafePdf)
+
+// OR
+import cafePdf from 'cafe-pdf'
+import 'cafe-pdf/package/cafe-pdf.css'
+export default {
+  // ...
+  components: {
+    cafePdf
+  }
+  // ...
+}
+```
+
+## Example
+
+Demo：[http://demo.const.team/pdf/](http://demo.const.team/pdf/)
+
+Note: the use of print, need to cooperate with the print style.
+
+```vue
+<template>
+  <cafe-pdf ref="pdf" @on-success="load" @on-scroll="scroll" :filePath="src">
+    <template slot="header">
+      pdf-src:<input type="text" v-model.lazy="src" @change="fileChanged">
+    </template>
+    <template slot="footer">
+      <button :disabled="currentNum<=1" @click="pre">pre</button>
+      <input type="number" :min="1" :max="pageNum" v-model.number="currentNum" @change="pageChange(currentNum)">
+      <button :disabled="currentNum>=pageNum" @click="next">next</button>
+      <select v-model="scale" @change="setScale">
+        <option value="auto">auto</option>
+        <option value="page-actual">actual</option>
+        <option value="page-fit">fit</option>
+        <option value="page-width">width</option>
+        <option value="0.50">50%</option>
+        <option value="0.75">75%</option>
+        <option value="1">100%</option>
+        <option value="1.25">125%</option>
+        <option value="1.50">150%</option>
+        <option value="1.75">175%</option>
+        <option value="2">200%</option>
+        <option value="3">300%</option>
+        <option value="4">400%</option>
+      </select>
+      <button @click="print">print</button>
+    </template>
+  </cafe-pdf>
+</template>
+
+<script>
+export default {
+  name: 'app',
+  data() {
+    return {
+      src: 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
+      pageNum: null,
+      scale: 1,
+      currentNum: 1
+    };
+  },
+  components: {},
+  methods: {
+    fileChanged() {
+      this.file = this.src;
+    },
+    load(val) {
+      this.pageNum = val;
+    },
+    setScale() {
+      this.$refs.pdf.changeScale(this.scale);
+    },
+    scroll(val) {
+      this.currentNum = val;
+    },
+    pre(){
+      this.$refs.pdf.prePage();
+    },
+    next(){
+      this.$refs.pdf.nextPage();
+    },
+    pageChange(val) {
+      this.$refs.pdf.goToPage(val);
+    },
+    print() {
+      this.$refs.pdf.printFile();
+    }
+  }
+};
+</script>
+
+<style>
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+* {
+  margin: 0;
+  padding: 0;
+}
+#app {
+  color: #2c3e50;
+  width: 100%;
+  height: 100%;
+}
+@media print {
+  #app {
+    display: none;
+  }
+}
+</style>
+```
+
+## Attributes
+| Attribute      | Description          | Type      | Accepted Values      | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| filePath | pdf source | string | — | — |
+| width | pdf width | string, number | — | 100% |
+| height | pdf height | string, number | — | 100% |
+| useOnlyCssZoom | only use css zoom | boolean | — | false |
+| showNav | show catalogue ( 
+If the file does not have a directory, it does not work) | boolean | — | true |
+| autoWidth | Whether to scale PDF to container width during initialization | boolean | — | false |
+| textLayerMode | Render in text mode, 0 use canvas，1 use text mode | number | 0/1 | 0 |
+
+## Events
+| Event Name | Description | Parameters |
+| ---- | ---- | ---- |
+| on-success | success event | count page, pdf obj |
+| on-error | error event | error |
+| on-scroll | Triggered when scrolling pdf | Current pages , Pdf Object |
+
+## Methods
+| Method | Description | Parameters |
+| ---- | ---- | ---- |
+| scale | scale | Scaling |
+| prePage | pre page | — |
+| nextPage | next page | — |
+| goToPage | PDF change page | page |
+| printFile | Print all pdf | scale |
+
+
+## Slot
+| name | Description |
+|------|--------|
+| header | header slot |
+| footer | footer slot |

package/lib/cafe-pdf/index.js

@@ -0,0 +1,7 @@
+import cafePdf from './src/index.vue'
+
+cafePdf.install = function (Vue) {
+  Vue.component(cafePdf.name, cafePdf)
+}
+
+export default cafePdf

package/lib/cafe-pdf/src/CMapReaderFactory.js

@@ -0,0 +1,18 @@
+import { CMapCompressionType } from './pdfjs-dist/build/pdf.js'
+
+// see https://github.com/mozilla/pdf.js/blob/628e70fbb5dea3b9066aa5c34cca70aaafef8db2/src/display/dom_utils.js#L64
+
+export default function() {
+
+	this.fetch = function(query) {
+
+		return import('buffer-loader!./pdfjs-dist/cmaps/'+query.name+'.bcmap' /* webpackChunkName: "noprefetch-[request]" */)
+		.then(function(bcmap) {
+
+			return {
+				cMapData: bcmap.default,
+				compressionType: CMapCompressionType.BINARY,
+			};
+		});
+	}
+};

package/lib/cafe-pdf/src/index.vue

@@ -0,0 +1,350 @@
+<template>
+  <div class="pdf-box" :style="{ width: formateWidth, height: formateHeight }">
+    <div v-if="$slots.header" class="pdf-header">
+      <slot name="header"></slot>
+    </div>
+    <div class="pdf-body">
+      <div
+        v-if="catalogue && catalogue.length > 0 && showNav"
+        class="pdf-catalogue"
+      >
+        <tree :list="catalogue" @item-click="nav"></tree>
+      </div>
+      <div class="pdf-container" ref="container" @scroll="fnScroll">
+        <div class="pdf-viewer" ref="viewer"></div>
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="pdf-footer">
+      <slot name="footer"></slot>
+    </div>
+    <div v-if="pageLoading" class="page-loading">
+      <em>{{ loadingNum }} / {{ countNum }}</em>
+      <progress
+        class="page-progress"
+        :value="loadingNum"
+        :max="countNum"
+      ></progress>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tree from './tree/index.vue';
+import PDFLib from './pdfjs-dist/webpack';
+import {
+  PDFLinkService,
+  PDFViewer,
+  EventBus,
+} from './pdfjs-dist/web/pdf_viewer.js';
+import './pdfjs-dist/web/pdf_viewer.css';
+import CMapReaderFactory from './CMapReaderFactory.js'
+export default {
+  name: 'cafe-pdf',
+  props: {
+    filePath: {
+      type: String,
+      required: true,
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: '100%',
+    },
+    showNav: {
+      type: Boolean,
+      default: true,
+    },
+    useOnlyCssZoom: {
+      type: Boolean,
+      default: false,
+    },
+    autoWidth: {
+      type: Boolean,
+      default: false,
+    },
+    textLayerMode: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      countPage: null,
+      currentPage: 1,
+      pageLoading: false,
+      loadingNum: 0,
+      countNum: 100,
+      timer: null,
+      pdfViewer: null,
+      pdfLoadingTask: null,
+      linkService: null,
+      catalogue: null,
+      scale: 'auto',
+      fnScroll: () => {},
+    };
+  },
+  components: {
+    Tree,
+  },
+  computed: {
+    formateWidth() {
+      return /(%|px)/.test(this.width) ? this.width : this.width + 'px';
+    },
+    formateHeight() {
+      return /(%|px)/.test(this.height) ? this.height : this.height + 'px';
+    },
+  },
+  watch: {
+    filePath: {
+      handler(newVal) {
+        if (newVal) {
+          this.initViewer();
+        }
+      },
+    },
+  },
+  created() {
+    this.fnScroll = this.fnThrottle(this.handleScroll, 200);
+  },
+  mounted() {
+    this.initViewer();
+  },
+  beforeDestroy() {
+    this.pdfLoadingTask.destroy();
+    this.pdfViewer = null;
+    this.linkService = null;
+    this.pdfLoadingTask = null;
+    this.timer = null;
+  },
+  methods: {
+    traversalData(data) {
+      for (let i = 0; i < data.length; i++) {
+        data[i].show = false;
+        if (data[i].items.length > 0) {
+          this.traversalData(data[i].items);
+        }
+      }
+      return data;
+    },
+    nav(item) {
+      this.linkService.navigateTo(item.dest);
+    },
+    initViewer() {
+      let _this = this;
+      const eventBus = new EventBus();
+      this.loading();
+      this.linkService = new PDFLinkService();
+
+      this.pdfViewer = new PDFViewer({
+        container: this.$refs.container,
+        useOnlyCssZoom: this.useOnlyCssZoom,
+        textLayerMode: this.textLayerMode,
+        linkService: this.linkService,
+        eventBus: eventBus,
+      });
+      this.linkService.setViewer(this.pdfViewer);
+      this.pdfViewer.currentScaleValue = this.scale;
+      eventBus.on('pagesinit', function() {
+        _this.pdfViewer.currentScaleValue = _this.scale;
+      });
+      
+      this.pdfLoadingTask = PDFLib.getDocument({ 
+        url: this.filePath,
+        CMapReaderFactory
+      });
+      this.pdfLoadingTask.promise
+        .then((pdfDoc) => {
+          this.catalogue = null;
+          this.pdfViewer.setDocument(pdfDoc);
+          this.linkService.setDocument(pdfDoc);
+          if (this.showNav) {
+            pdfDoc.getOutline().then((outline) => {
+              if (outline) {
+                this.catalogue = this.traversalData(outline);
+              }
+            });
+          };
+          this.countPage = pdfDoc.numPages;
+          this.$emit('on-success', this.countPage, pdfDoc);
+          this.pdfViewer._currentScale = 1;
+          this.loadingNum = 100;
+          clearInterval(this.timer);
+          this.pageLoading = false;
+        })
+        .catch((error) => {
+          clearInterval(this.timer);
+          this.pageLoading = false;
+          this.$emit('on-error', error);
+        });
+    },
+    fnThrottle(fn, delay, atleast) {
+      let timer = null;
+      let previous = null;
+      return function() {
+        let now = +new Date();
+        if (!previous) previous = now;
+        if (atleast && now - previous > atleast) {
+          fn();
+          previous = now;
+          clearTimeout(timer);
+        } else {
+          clearTimeout(timer);
+          timer = setTimeout(function() {
+            fn();
+            previous = null;
+          }, delay);
+        }
+      };
+    },
+    handleScroll() {
+      let scrolled = this.$refs.container.scrollTop;
+      this.currentPage = this.pdfViewer._currentPageNumber;
+      this.$emit('on-scroll', this.currentPage, this.pdfViewer, scrolled);
+    },
+    prePage() {
+      this.goToPage(--this.currentPage);
+    },
+    nextPage() {
+      this.goToPage(++this.currentPage);
+    },
+    changeScale(scale) {
+      this.scale = scale;
+      this.pdfViewer.currentScaleValue = this.scale;
+    },
+    goToPage(page) {
+      if (page < 1 || page > this.countPage) return;
+      this.pdfViewer.currentPageNumber = page;
+    },
+    loading() {
+      this.pageLoading = true;
+      this.loadingNum = 0;
+      this.countNum = 100;
+      this.timer = setInterval(() => {
+        this.loadingNum += Math.floor(Math.random() * 3 + 1);
+        if (this.loadingNum > 95) {
+          clearInterval(this.timer);
+        }
+      }, 40);
+    },
+    async getPDF(scale) {
+      this.pageLoading = true;
+      this.loadingNum = 0;
+      this.countNum = this.countPage;
+      let print = document.querySelector('#print-container');
+      if (!print) {
+        let container = document.createElement('div');
+        container.setAttribute('id', 'print-container');
+        document.body.appendChild(container);
+      } else {
+        print.innerHTML = '';
+      }
+      let pdf = await PDFLib.getDocument(this.filePath);
+      for (let i = 1; i <= pdf.numPages; i++) {
+        try {
+          await this.rendPDF(pdf, i, scale);
+          this.loadingNum = i;
+        } catch (e) {
+          this.pageLoading = false;
+        }
+      }
+      this.pageLoading = false;
+      window.print();
+    },
+    async rendPDF(pdf, num, scale) {
+      let page = await pdf.getPage(num);
+      let container = document.querySelector('#print-container');
+      let viewport = page.getViewport(scale);
+      let pageDiv = document.createElement('div');
+      pageDiv.setAttribute('id', 'page-' + (page.pageIndex + 1));
+      container.appendChild(pageDiv);
+      let canvas = document.createElement('canvas');
+      pageDiv.appendChild(canvas);
+      let context = canvas.getContext('2d');
+      canvas.height = viewport.height;
+      canvas.width = viewport.width;
+      let renderContext = {
+        canvasContext: context,
+        viewport: viewport,
+      };
+      await page.render(renderContext);
+    },
+    printFile(scale = 1.5) {
+      this.getPDF(scale);
+    },
+  },
+};
+</script>
+<style>
+.pdf-box {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+.pdf-header {
+  padding: 5px;
+  background-color: rgb(249, 249, 250);
+  border-bottom: 1px solid #d2d2d2;
+}
+.pdf-body {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+}
+.pdf-container {
+  position: relative;
+  overflow: auto;
+  flex: 1;
+}
+.pdf-body .page,
+.pdf-body .textLayer {
+  margin: 0 auto;
+}
+.pdf-body .page {
+  position: relative;
+}
+.pdf-footer {
+  padding: 5px;
+  background-color: rgb(249, 249, 250);
+  border-top: 1px solid #d2d2d2;
+}
+#print-container {
+  display: none;
+}
+.page-loading {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  text-align: center;
+}
+.page-loading em {
+  margin-top: 10%;
+  display: block;
+  color: #fff;
+  font-style: normal;
+}
+.page-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+@media print {
+  .pdf-box {
+    display: none;
+  }
+  #print-container {
+    display: block;
+  }
+}
+</style>

package/lib/cafe-pdf/src/pdfjs-dist/CODE_OF_CONDUCT.md

@@ -0,0 +1,15 @@
+# Community Participation Guidelines
+
+This repository is governed by Mozilla's code of conduct and etiquette guidelines. 
+For more details, please read the
+[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 
+
+## How to Report
+For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page.
+
+<!--
+## Project Specific Etiquette
+
+In some cases, there will be additional project etiquette i.e.: (https://bugzilla.mozilla.org/page.cgi?id=etiquette.html).
+Please update for your project.
+-->