【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

前言

从去年年初开始，自己便下决心要写一个vue系列的博客，但时至今日，才写系列的第三篇博客，想来甚是惭愧。

但是慢归慢，每一篇都要保证质量，以及要写出自己的心路历程，防止自己工作中填的坑再让读者走一遍。

vue上手相对react来说是比较简单的，对于vue的基本指令以及语法，应该没有什么能比官网更详细，更生动的了。仔细想来，vue值得一说的，在项目中会让新手感到困惑的，是vue的组件，今天就最近工作中用到的一个pdf查看组件，和大家聊聊vue的组件。最后会讲如何将自己的代码封装成一个npm包，发布到npm官网。

去年5月份的，写了vue系列的第一篇使用vue-cli脚手架工具搭建vue-webpack项目，今天再次使用vue-cli初始化项目时，发现vue-cli已经升级到2.9.2。

多说一句，因为vue-cli的命令为vue，所以查看vue-cli的版本时，需要使用vue -V，而且是大写的V。仔细看下vue-cli 2.9的官方模板，惊喜的发现多了一个pwa模板。

 

前一阵子，谷歌开发者大会在上海举办，会上主推pwa，在这在简单说下PWA，大神可直接忽略。

简述PWA

 PWA是Progressive Web App的缩写，字面意思理解为渐进增强的网页应用。一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。

在一个正常的HTML中，添加一个link标签，href为manifest.json，即可将你的网页应用添加到主屏幕。

manifest.json中会包含你的图标、名称。背景色等信息。

复制代码
{
  "name": "你的web app名称",
  "short_name": "简称",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "主体色（#ffffff）",
  "background_color": "背景色(#333333)",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ]
}
复制代码
?
1
引入manifest.json<br><link rel="manifest" href="manifest.json" />

PWA应用能实现离线访问的核心是Service Worker，Service Worker 在网页已经关闭的情况下还可以运行, 用来实现页面的缓存和离线, 后台通知等等功能。

为了让应用离线工作，需要注册一个 service worker，一段允许在后台运行的脚本，不需要 用户打开 web 页面，也不需要其他交互。在应用根目录放置serviceworker.js，然后在浏览器注册。

?
1
if('serviceWorker' in navigator) { <br>　　navigator.serviceWorker .register('/service-worker.js') <br>　　.then(function() { console.log('Service Worker Registered'); <br>}); }

　　在serviceworker注册后，浏览器首次访问该应用时，会执行install方法，这个方法的callback中我们能够缓存所有需要缓存的数据。具体过程为：
首先定义需要缓存的文件类型，以及缓存存放路径；然后在网页相应所有请求之前，会将请求统一处理，可以控制一部分请求从缓存里拿数据。缓存会通过字符串名称，动态的更新。篇幅有限，这里大概简述下。具体可以移步饿了么团队知乎。

vue组件vue-pdf-shower

下面言归正传，说说vue组件。

最近笔者在项目中遇到一个pdf预览的需求，经过调研，最终决定用火狐的pdf.js封装一个vue组件。

其实需求还是比较简单的，就是后台给一个URL，前端将pdf加载到网页中即可。chrome和Firefox是自带pdf查看器的，简单的做法是使用iframe嵌入，但该方案兼容性太差，而且不受我们控制，所以pass了。

总体思路如下：

1.通过pdf.js提供的api，我们传入pdf的URL，在callback中会拿到所需的pdf对象。

2.通过传入不同的页码，可以拿到指定页面的page对象。

3.通过canvas，将page对象渲染到页面中。

4.遍历所有page，循环生成多个canvas对象，插入dom。

把思路缕清楚之后，开发就比较简单了。

首先，确定dom结构。由于我们的canvas是动态插入dom的，所以只提供一个wraper即可。

dom结构如下

?
1
2
3
4
5
6
7
<template>
    <div class="pdf-wraper">
        <div id="cvsWraper">
            <div class="loading-pdf" v-if="isloading">{{loadingTxt}}</div>
        </div>
    </div>
</template>

　

vue-pdf-viewer组件js

该组件需要传两个参数，一个是URL，一个是缩放值scale。

vue组件需要显式说明自身期望传入哪些属性，并且可以赋予默认值。调用组件时，传入不同的属性，可以实现父组件向子组件传值。

?
1
2
3
4
5
6
7
8
props: {
        pdfurl: {
            default: ''
        },
        scale: {
            default: 1
        }
    }

　　

子组件向父组件传值

子组件向父组件通信时，需要使用vue.$emit事件。

$emit事件接受两个参数，第一个为所要抛出的方法名，第二个为所抛出方法带的参数。

在这个组件中，只暴露出一个onErr事件，即当pdf加载失败时的回调函数。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
PDFJS.getDocument(me.pdfurl).then(function (pafObj) {
            me.isloading = true;
            me.pdfDoc = pafObj;
            let totalNum = me.pdfDoc.numPages;
 
            // 循环渲染所有canvas
            for (let i = 1; i <= totalNum; i++) {
                let id = `canvas${i}`;
                let cvsNode = document.createElement('canvas');
                cvsNode.setAttribute('id', id);
                cvsNode.setAttribute('class', 'canvas-item');
                cvsWraper.appendChild(cvsNode);
                me.renderPage(i);
 
                if (totalNum === i) {
                    me.isloading = false;
                }
            }
        }).catch(function (err) {
            me.loadingTxt = '加载失败，请稍后重试';
            me.$emit('onErr', err);
        });

　　

调用组件

在调用组件时，需要传入所需的属性和方法。

?
1
2
3
4
5
6
7
8
9
<template>
    <div>
         <pdfshower
            :pdfurl="pdfurls"
            :scale="scale"
            @onErr="onErr"
        ></pdfshower>
    </div>
</template>

　　

非父子组件通信

兄弟组件通信也是比较常见的，比如说在一个页面中，导航是一个组件，内容区域是一个组件；当导航切换时，需要通知内容组件发生变化，并告诉他导航的id。

处理兄弟组件通信的问题，一般有两种方式：

1.兄弟组件都引入一个公共vue组件hub，通过hub抛出事件，和监听事件，以达到兄弟组件通信。

2.使用vuex。

项目中比较常见的是第一种做法，我做的vue项目中只有一次使用到了vuex；我对vuex的理解是：

vuex类似于一个全局的存储空间，你可以把他理解为将需要传递的东西绑在了window下，所以在任何地方都可以拿到，并做修改。

在项目中用到的hub.js

?
1
2
3
4
5
6
/**
 * @file 事件总线
 * @author yangtianjiao
/
import Vue from 'vue';
export default new Vue({});

　　

假设是上面说的那种情况，在导航组件切换时，通过hub发射信息：

?
1
2
3
hub.$emit('changeTableData', {
       dateKey: this.curDateTab
});

　　

内容区域监听hub发射的方法：

?
1
2
3
4
5
6
7
8
9
10
hub.$on('changeTableData', item => {
                this.pageNum = 1;
                this.total = 0;
                this.dataList = [];
                this.orderFieldId = 1;
                this.orderType = 1;
                this.contenctDesc = '';
                this.emptyText = '数据加载中...';
                this.isLoading = false;
            });

　　

在内容组件销毁时，取消对hub事件的监听

?
1
2
3
beforeDestroy() {
        hub.$off('changeTableData');
}

　　

兄弟组件通信并不复杂，但要深刻理解，必须在项目中多运用、实践。这块应该是vue最难的部分了，这块掌握了，vue项目做起来就会得心应手。

发布npm包

大家平时工作中，最常用的是npm，很多包、类库都从npm安装。其实我们很容易就会发布属于自己的npm包，下面我会一步步讲讲如何将上述的vue-pdf-viewer组件发布到npm官网的。

1.执行npm init

执行npm init后，根据命令行提示，依次输入

包名称

版本

描述

入口文件

测试脚本

关键词

作者

版权信息（协议）

等等，最后OK，生成一个package.json文件。

2.确定包的目录结构

package.json是npm帮我们生成的，根目录下有入口文件index.js，和readme.md。

index.js中其实就是一句话，将真正的index.vue暴露出去

index.js

?
1
2
3
4
5
6
/**
 * @file vue-pdf-shower
 * @author v_yangtianjiao(v_yangtianjiao@baidu.com)
 * @time 18/01/15
 */
module.exports = require('./lib/index.vue');

　　

readme中放有对包的简述，以及包的基本用法

readme.md

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
# vue-pdf-shower
 
## 介绍
> 基于pdf.js的pdf简易查看组件。
> 该组件加载全部pdf页面，不提供翻页查看功能。
 
## github
[vue-pdf-shower](https://github.com/TJ666/vue-pdf-shower)
 
## install
```
npm i vue-pdf-shower --save
```
## example
```
<template>
    <div>
         <pdfshower
            :pdfurl="pdfurls"
            :scale="scale"
            @onErr="onErr"
        ></pdfshower>
    </div>
</template>
 
<script>
import pdfshower from 'vue-pdf-shower';
export default {
    name: 'pdfshower',
    components: {
        pdfshower
    },
    data() {
        return {
            // 所查看的pdf url
            pdfurls: '//cdn.mozilla.net/pdfjs/tracemonkey.pdf',
            // 缩放 默认为1
            scale: 1.2
        };
    },
    methods: {
        // 加载失败的callback
        onErr(err) {
            console.log('pdf加载失败，请重试');
            console.log('错误信息：', err);
        }
    }
};
</script>
```

　　

至于为啥有个lib文件夹，还有目录结构为啥长这样？我的回答是：

看了一遍所有的npm包都是这样，咱就按人家的来吧 - -

好了，咱们的包已经准备就绪了，就差发布！！！

3.注册npm账号&发包

打开冰箱，将大象放进冰箱，关上冰箱门。

注册很简单的，只需要一个邮箱就行，连网站都打不开的同学就好好写写jquery去吧。

4.npm login

在命令行输入npm login，

然后依次输入用户名和密码，以及注册的邮箱。

注意：输入密码时，密码是不会显示出来的，不要方！

登录后只要没有错误提示即登录成功。

5.npm publish发包

离成功只差一步。

一切准备妥当，cd 到我们的vue-pdf-shower目录，先检查下npm有没有重名的包。

可以去npm官网搜索，也可以直接npm install 包名，如果报错，那么恭喜你包名没有重复的。

执行npm publish

定睛一看，报了个错。原来是package.json 的版本号没有改。将版本号升一个级，在执行publish。

成功！

 6.去npm官网检验发包情况

发现已经可以搜到，因为我是昨天发的包，一天时间内已有116次下载。嗯，还不赖。

最后附上本组件github地址，欢迎大家拍砖。
https://github.com/TJ666/vue-pdf-shower

 

参考文献

PWA 入门: 写个非常简单的 PWA 页面

手把手教你用npm发布一个包

 

posted @   TJYoung  阅读(4686)  评论(2)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
历史上的今天：
2017-01-16 快速上手微信小程序-快递100
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛