又撸了个轮子

基于 PDF.js 在 Vue 中渲染 PDF 文件,支持文本渲染、懒加载、分页、缩放和打印功能。

鉴于市面上没有特别顺手的预览PDF插件,所以周末两天在家撸代码,终于搞出来一个可用的玩意。项目中使用的VUE-PDF,超过200页,直接在IE下卡死,我这个插件,500页PDF,也可以做到丝滑般的使用体验(自卖自夸)!

2021-06-21T12:38:46.png

可以看到,只加载了前两页,后面的12页全部都没有渲染。

Install

npm install cafe-pdf --save

Use

import cafePdf from 'cafe-pdf'
import 'cafe-pdf/package/cafe-pdf.css'
Vue.use(cafePdf)

Example

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

注意:使用打印功能,需配合打印样式。

Attributes

参数说明类型可选值默认值
srcpdf地址string
useOnlyCssZoom缩放模式为CSSbooleanfalse
autoWidth初始化时是否将pdf缩放到容器宽度booleanfalse
textLayerMode是否为文本模式渲染,0使用canvas,1使用文本模式number0/10

Events

事件名说明参数
on-loaded初始化事件页码总数
on-scroll滚动pdf时触发当前页数

Methods

方法名说明参数
zoom缩放缩放比例:auto
changePagePDF翻页页码
printPdf打印整个PDFscale

Slot

name说明
header头部插槽。
footer尾部插槽。

已经开源,给个星星呗!

Owner:
Updated:1970-01-01 08:00
Watch:
Star:
Fork:

已有 2 条评论

  1. sky sky
    回复

    你好,根据npm官网的安装步骤,
    使用时,报这个错误了,如何解决?
    TypeError: PdfjsWorker is not a constructor

    1. 王叨叨 王叨叨 [作者]
      回复

      在 vue.config.js 中配置 loader:

      module.exports = {
        parallel: false,
        chainWebpack: config => {
          config.module
            .rule("worker")
            .test(/\.worker\.js$/)
            .use("worker-loader")
            .loader("worker-loader")
            .options({
              inline: true,
              fallback: false,
            })
            .end();
        }
      };

添加新评论