又撸了个轮子

基于 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缩放模式为CSSboolean—false
autoWidth初始化时是否将pdf缩放到容器宽度boolean—false
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：

标签: pdfjs

除单独说明外，文章默认采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

本文超过2年没有更新，今后内容也许不会被维护或者支持，部分内容可能具有时效性，涉及技术细节或者软件使用方面，本文不保证相应的技术更新和实践可操作性。

小礼物走一走
打赏

相关文章：

已有 2 条评论

  1. sky sky
    2022-11-03 19:57
    回复

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

    1. 王叨叨 王叨叨 [作者]
      2022-11-04 12:33
      回复

      在 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();
  }
};

添加新评论