需求要生成動(dòng)態(tài)生成電子文件以及后面簽字，但是又要在小程序里預(yù)覽效果。

生成word的難點(diǎn)

1. 文檔模式和web模式的差異
   生成word，一開始是通過word模板通過修改變量的方式生成新docx文檔后，二次打開導(dǎo)出到pdf。結(jié)果導(dǎo)出pdf 看了phpword的源碼，就是通過word web版式生成html 后 導(dǎo)出pdf。導(dǎo)致docx 一個(gè)效果 pdf一個(gè)效果。解決方法，放棄word 轉(zhuǎn)pdf 直接 html 轉(zhuǎn)pdf。
2. 復(fù)選框的實(shí)現(xiàn)。
   一般有以下幾種方式：
   docx 里 插入圖片
   docx 里 插入 emoji表情 ?
   docx 里 插入 字符 □ 前面字符需要字體對應(yīng)
   html 里寫入input checkbox 但是要完整的form，id name 要不重復(fù)，一樣可能導(dǎo)致pdf 里的復(fù)選款 一點(diǎn)全選
   html 里 樣式 顯示checkbox
3. 簽字的實(shí)現(xiàn)
   docx 替換字符站位圖片
   html里替換圖片標(biāo)簽，
4. 中文亂碼
   word亂碼 和pdf 亂碼 分別處理方法不一樣，word亂碼 是系統(tǒng)缺中文字體；pdf亂碼還需要看庫去處理 word轉(zhuǎn)pdf 用的dom2pdf html轉(zhuǎn)pdf 用snappy。dom2pdf 有個(gè)上古類去處理，snappy copy store/simsun.ttc 到 /usr/share/fonts/truetype/ chmod 0755 simsun.ttc
5. 生成html 快速方法
   http://hiprint.io/
   或者 純前端手寫。

.VueRouter基本概念

Vue-Router是 Vue.js官方的路由插件，讓用 Vue.js 構(gòu)建單頁應(yīng)用變得輕而易舉。功能包括：

• 嵌套路由映射
• 動(dòng)態(tài)路由選擇
• 模塊化、基于組件的路由配置
• 路由參數(shù)、查詢、通配符
• 展示由 Vue.js 的過渡系統(tǒng)提供的過渡效果
• 細(xì)致的導(dǎo)航控制
• 自動(dòng)激活 CSS 類的鏈接
• HTML5 history 模式或 hash 模式
• 可定制的滾動(dòng)行為
• URL 的正確編碼

Vue比較適合單頁面的項(xiàng)目，所有的網(wǎng)頁的內(nèi)容都是通過一個(gè)Html頁面進(jìn)行切換。在這個(gè)Html頁面中通過不同的路由來控制不同組件的顯示，這個(gè)控制就需要Vue-Router來完成。

Vue的單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射（對應(yīng)聯(lián)系）起來，訪問不同的路徑就顯示不同的組件。

典型單頁面運(yùn)用

所有內(nèi)容都在一個(gè)Html頁面顯示，每個(gè)標(biāo)題都是一個(gè)組件，點(diǎn)擊后在不同組件中進(jìn)行內(nèi)容切換，顯示不同內(nèi)容。

Vue-Router目前有兩個(gè)版本。3.X版本 和 4.X 版本

• Vue-Router3.X 版本只能結(jié)合Vue2使用；
• Vue-Router4.X 版本只能結(jié)合Vue3使用；

Vue-Router的安裝

Vue-Router3.X 版本 : npm install vue-router@3

Vue-Router4.X 版本 : npm install vue-router@4

官方文檔： https://router.vuejs.org/zh/

如果在一個(gè)模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

2.實(shí)例演示：

• 創(chuàng)建一個(gè)新的項(xiàng)目（本例使用Vue2），具體安裝過程見前面筆記（九）

將剛剛創(chuàng)建的項(xiàng)目 vuerouter-demo 拖入 Visual Studio Code 中。目前項(xiàng)目中還沒有 Vue-Router 需要進(jìn)行安裝。

注意：本例由于使用的是Vue2，所以要安裝vue-router3

在Visual Studio Code 中終端中輸入如下命令：

npm install vue-router@3

安裝完成后在 package.json 中及可以看到 vue-router3

• 創(chuàng)建路由組件：

下面模擬網(wǎng)易音樂的界面，在項(xiàng)目components文件夾中自定義Discover.vue、Friends.vue、My.vue三個(gè)組件，并用Vue-Router來控制它們的顯示與切換。

Discover.vue：

<template>
 <div>
 <h1>發(fā)現(xiàn)音樂</h1>
 </div>
</template>

Friends.vue

<template>
 <div>
 <h1>關(guān)注</h1>
 </div>
</template>

My.vue

<template>
 <div>
 <h1>我的音樂</h1>
 </div>
</template>

三個(gè)組件都需要鏈接對應(yīng)關(guān)系，這就需要用Vue-Router來描述。

• 聲明路由鏈接和站位標(biāo)簽

可以使用<router-link>標(biāo)簽來聲明路由鏈接，并使用<router-view>標(biāo)簽來聲明路由站位符。

我們在根組件 App.vue 中進(jìn)行路由的跳轉(zhuǎn)，代碼如下：

 <!--聲明路由鏈接-->
 <router-link to="/discover">發(fā)現(xiàn)音樂</router-link>
 <router-link to="/friends">關(guān)注</router-link>
 <router-link to="/my">我的音樂</router-link>

這時(shí)App組件上就有三個(gè)按鈕，有興趣可以用CSS進(jìn)行樣式美化。這時(shí)候點(diǎn)擊但是還無法跳轉(zhuǎn)。因?yàn)槎x的鏈接和三個(gè)組件的對應(yīng)關(guān)系還沒有設(shè)置。因?yàn)閷?yīng)關(guān)系比較復(fù)雜，可以放到單獨(dú)的 js 文件中寫。

• 創(chuàng)建路由模塊

在項(xiàng)目 src 中創(chuàng)建一個(gè) router 文件夾，在里面新建一個(gè)名為 index.js 路由模塊，在里面定義對應(yīng)關(guān)系,代碼如下：

//導(dǎo)入Vue和VueRouter
import VueRouter from "vue-router";
import Vue from "vue";
//導(dǎo)入組件
import Discover from '../components/Discover.vue'
import Friends from '../components/Friends.vue'
import My from '../components/My.vue'
//將VueRouter設(shè)置為vue的插件
Vue.use(VueRouter)

const router=new VueRouter({
 //指定hash屬性與組件的對應(yīng)關(guān)系
 routes:[
 {path:'/discover',component:Discover},
 {path:'/friends',component:Friends},
 {path:'/my',component:My},
 ]
})

path對應(yīng)鏈接；comment對應(yīng)組件。

此時(shí)，組件要顯示到哪里去？這就需要站位標(biāo)簽<router-view>。需要組件在哪里顯示<router-view>就放到哪里。我們以放到根組件 App.vue 舉例，代碼如下：

一旦用戶點(diǎn)擊了“發(fā)現(xiàn)音樂”，瀏覽器就會(huì)跳轉(zhuǎn)的 discover 。根據(jù)前面路由的定義discover 對應(yīng)的是 Discover 組件。這時(shí)Discover 組件的內(nèi)容就會(huì)被渲染到<router-view>這個(gè)位置，從而完成界面的跳轉(zhuǎn)切換。

下面需要在 index.js 中將路由導(dǎo)出，代碼如下：

export default router

最后在main.js 中導(dǎo)入并設(shè)置，代碼如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip=false

new Vue({
 render: h=> h(App),
 router:router
}).$mount('#app')

運(yùn)行 npm run serve 啟動(dòng)項(xiàng)目。

我們發(fā)現(xiàn)沒有顯示下面的視圖，點(diǎn)擊“發(fā)現(xiàn)音樂”等，鏈接才會(huì)切換，這就可以顯示出來了。

第一次加載是到首頁，如果這個(gè)時(shí)候加載組件而沒有內(nèi)容顯示，這樣也不合適。實(shí)際項(xiàng)目中會(huì)指定一個(gè)默認(rèn)加載的組件。如網(wǎng)易云音樂中，進(jìn)入首頁默認(rèn)是進(jìn)入“發(fā)現(xiàn)音樂”組件。

3.vue-router進(jìn)階

• 路由重定向

用戶在訪問地址A的時(shí)候，強(qiáng)制用戶跳轉(zhuǎn)到地址B，從而顯示特定組件的頁面。

通過路由規(guī)則的 redirect 屬性，指定一個(gè)新的路由地址，可以很方便地設(shè)置路由的重定向。

例如將首頁重定義為顯示“發(fā)現(xiàn)音樂”組件

{path:'/',redirect:"/discover"},

• 嵌套路由

可以在組件下再嵌套組件，比如在“發(fā)現(xiàn)音樂”下再嵌套“推薦”、“歌單”等子路由。

在Discover.vue組件中，聲明 toplist 和 playlist 的子路由鏈接以及子路由占位符，代碼如下：

<template>
 <div>
 <h1>發(fā)現(xiàn)音樂</h1>
 <!--子路由鏈接-->
 <router-link to="/discover/toplist">推薦</router-link>
 <router-link to="/discover/playlist">歌單</router-link>
 <hr>
 <router-view></router-view>
 </div>
</template>

這個(gè)時(shí)候就需要新建 Toplist 和 Playlist 兩個(gè)組件。

然后在 index.js 中引入Toplist 和 Playlist 兩個(gè)組件，然后通過 children 屬性嵌套聲明子路由的方式來設(shè)置對應(yīng)關(guān)系。這時(shí)index.js 完整代碼如下：

//導(dǎo)入Vue和VueRouter
import VueRouter from "vue-router";
import Vue from "vue";
//導(dǎo)入組件
import Discover from '../components/Discover.vue'
import Friends from '../components/Friends.vue'
import My from '../components/My.vue'
import Toplist from '../components/Toplist.vue'
import Playlist from '../components/Playlist.vue'
//將VueRouter設(shè)置為vue的插件
Vue.use(VueRouter)

const router=new VueRouter({
 //指定hash屬性與組件的對應(yīng)關(guān)系
 routes:[
 //當(dāng)用戶訪問 / 時(shí)，調(diào)轉(zhuǎn)到 /discover
 {path:'/',redirect:"/discover"},
 {path:'/discover',
 component:Discover,
 //通過 children 屬性，可以嵌套聲明子路由
 children:[
 {path:"toplist",component:Toplist},
 {path:"playlist",component:Playlist},
 ]
 },
 {path:'/friends',component:Friends},
 {path:'/my',component:My},
 ]
})

//導(dǎo)出默認(rèn)路由
export default router

• 動(dòng)態(tài)路由

很多路由鏈接，如下：

<router-link to="prodect/1">商品1</router-link>
<router-link to="prodect/2">商品2</router-link>
<router-link to="prodect/3">商品3</router-link>

const router=new VueRouter({
 //指定hash屬性與組件的對應(yīng)關(guān)系
 routes:[
 {path:"prodect/1",component:Prodect},
 {path:"prodect/2",component:Prodect},
{path:"prodect/3",component:Prodect},
 ]
 },
 {path:'/friends',component:Friends},
 {path:'/my',component:My},
 ]
})

上述方式復(fù)用性非常差。

思考：如有一個(gè)商品列表，當(dāng)用戶點(diǎn)商品的時(shí)候就跳轉(zhuǎn)到該商品的詳情，每一個(gè)商品都會(huì)有商品詳情，不可能給每一個(gè)商品寫一個(gè)商品詳情的組件。這時(shí)就希望跳轉(zhuǎn)到詳情組件的時(shí)候重用組件里面的東西。

動(dòng)態(tài)路由：就是把Hash地址中可變的部分定義為參數(shù)項(xiàng)，從而提高路由規(guī)則的復(fù)用性。在 vue-router 中使用英文的冒號 （ : ）來定義路由參數(shù)項(xiàng)，如下：

{path : '/prodect/:id,component:Prodect'}

下面進(jìn)行實(shí)例演示：

1.有商品就需要先建一個(gè)商品組件：Prodect.vue

2.假設(shè)商品組件是基于 My.vue 組件的子路由，修改 My.vue 組件，如下：

<template>
 <div>
 <h1>我的音樂</h1>
 <router-link to="/My/1">商品1</router-link>
 <router-link to="/My/2">商品2</router-link>
 <router-link to="/My/3">商品3</router-link>
 <router-view></router-view>
 </div>
</template>

3.在 index.js 中設(shè)置對應(yīng)關(guān)系，先導(dǎo)入 Prodect.vue 組件

import Prodect from '../components/Prodect.vue'

4.使用 children 屬性定義跳轉(zhuǎn)，代碼如下：

{path:'/my',
 component:My,
 children:[
 {path:":id",component:Prodect},
 ]
 },

5.啟動(dòng)項(xiàng)目，在瀏覽器中就可以顯示效果：點(diǎn)擊“我的音樂”，然后在顯示的商品1/2/3 中任點(diǎn) 一個(gè)，都可以顯示“商品”這個(gè)內(nèi)容出來。

現(xiàn)在有一個(gè)問題，在跳轉(zhuǎn)到 Prodect.vue 組件時(shí)，如何知道需要顯示商品幾的詳情呢？

解決方法：

方法1：通過動(dòng)態(tài)路由匹配的方式渲染出來的組件中，可以使用 $route.params 對象訪問到動(dòng)態(tài)匹配的參數(shù)項(xiàng)，比如在商品詳情組件的內(nèi)部，根據(jù) id 值，請求不同的商品數(shù)據(jù)。修改代碼如下：

這時(shí)，點(diǎn)擊不同的商品就顯示出是商品幾的詳情

方法2：為了簡化路由參數(shù)的獲取形式，vue-router 允許在路由規(guī)則中開啟 props 傳參，index.js 中修改示例代碼如下：

{path:":id",component:Prodect,props:true},

Prodect.vue 組件修改如下：首先定義一個(gè)參數(shù) id ；然后就不需要 $route.params，可以直接用于 id 來傳遞參數(shù)了，瀏覽器顯示效果同上。

<template>
 <h3>商品{{ id }}</h3>
</template>

<script>
export default {
 props:["id"]
}
</script>

• 編程式導(dǎo)航（在此僅作了解,后面的綜合運(yùn)用中再詳細(xì)演示）

聲明式導(dǎo)航：<router-link :to "....">

編程式導(dǎo)航：router.push(...)

除了使用<router-link>創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接，還可以借助 router 的實(shí)例方法，通過編寫代碼來實(shí)現(xiàn)。

想要導(dǎo)航到不同的 URL ，可以使用 router.push 方法。這個(gè)方法會(huì)向 history 棧添加一個(gè)新的記錄。所以，當(dāng)用戶點(diǎn)擊瀏覽器“后退”按鈕時(shí)，則回到之前的 URL 。

當(dāng)點(diǎn)擊 <router-link>時(shí)，這個(gè)方法會(huì)在內(nèi)部調(diào)用。所以，點(diǎn)擊<router-link :to "....">等同于調(diào)用router.push(...) 。

<template>
 <div>
 <h3>推薦</h3>
 <button @click="gotoProduct(2)">跳轉(zhuǎn)到商品2</button>
 </div>
</template>

<script>
export default {
 methods:{
 gotoProduct:function(id){
 this.$router.push('/movie/${id}')
 }
 }
}
</script>

• 導(dǎo)航守衛(wèi)

導(dǎo)航守衛(wèi)可以控制路由的訪問權(quán)限

比如還沒有登錄就想跳轉(zhuǎn)到訂單頁面，這時(shí)可以用路由守衛(wèi)進(jìn)行統(tǒng)一控制。

全局導(dǎo)航守衛(wèi)會(huì)攔截每個(gè)路由規(guī)則，從而對每個(gè)路由進(jìn)行訪問權(quán)限控制。可以使用 router.beforeEach 注冊一個(gè)全局前置守衛(wèi)：

router.beforeEach(( to,from,next )=>{
 if ( to.path==='/main' && !isAuthenticated){
 next( '/login' )
 }
 else{
 next()
 }
})

to：即將進(jìn)入目標(biāo)

from：當(dāng)前導(dǎo)航正要離開的路由

在守衛(wèi)方法中，如果聲明了 next 形參，則必須調(diào)傭 next()函數(shù)，否則不允許用戶訪問任何一個(gè)路由

直接放行：next()

強(qiáng)制停留在當(dāng)前頁面：next(false)

強(qiáng)制跳轉(zhuǎn)到登錄頁面：next( '/login' )