Nationwide Polamorous Matrimony

    cafe-pdf

    2.0.0 • Public • Published

    Cafe-PDF

    NPM Publish NPM version

    Render PDF files on Vue pages using pdf.js, supporting text rendering, lazy loading, paging, scaling, and printing.

    Install

    npm install cafe-pdf --save

    Quick Start

    import cafePdf from 'cafe-pdf'
    Vue.use(cafePdf)
    
    // OR
    import cafePdf from 'cafe-pdf'
    export default {
      // ...
      components: {
        cafePdf
      }
      // ...
    }

    Example

    Demo:http://demo.const.team/pdf/

    Note: the use of print, need to cooperate with the print style.

    <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 @click="cw">cw</button>
          <button @click="ccw">ccw</button>
          <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();
        },
        cw() {
            this.$refs.pdf.rotateCW();
        },
        ccw() {
            this.$refs.pdf.rotateCCW();
        }
      }
    };
    </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
    rotateCW PDF clockwise rotation
    rotateCCW PDF counterclockwise rotation
    goToPage PDF change page page
    printFile Print all pdf scale
    destroyView PDF destroy

    Slot

    name Description
    header header slot
    footer footer slot

    Keywords

    Install

    npm i cafe-pdf

    DownloadsWeekly Downloads

    139

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    14.4 MB

    Total Files

    355

    Last publish

    Collaborators

    • wangdaodao