vue框架下，项目开发中有前端负责的pdf生成；
搞一下
这里是vue-pdf 生成插件的使用 www.npmjs.com/package/vue…
1.vue-pdf下载
npm install vue-pdf
或者
yarn add vue-pdf
2.使用方法（简单案例）
<template>
<pdf src="./path/to/static/relativity.pdf"></pdf>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
}
}
以上这个就是单纯在页面中加一个pdf
当然实际情况下肯定会更加复杂，以下即是各个属性，事件的介绍
1.属性API
1.1 :src
类型为字符串String 即后端返回回来的pdf地址
1.2 :page
类型为数字Number 为当前页码
1.3 :rotate
类型为数字Number 为旋转角度（没错，pdf是支持旋转的）
2. 事件 Events
2.1 @password
即查看这个pdf需要密码登录（这个用的场景比较少）
2.2 @progress
即打开的进度，用于打开较大pdf数据的情况下，区间为0-1
2.3 @loaded
加载文档时触发
2.4 @page-loaded
切换页面时触发
2.5 @num-pages
总页面数
2.5 @error
发生错误时触发
2.5 @link-clicked
点击pdf中的链接时触发
3.例子
3.1涉及到@num-pages与@page-loaded
<template>
<div>
{{currentPage}} / {{pageCount}}
<pdf
src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"
@num-pages="pageCount = $event"
@page-loaded="currentPage = $event"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
},
data() {
return {
currentPage: 0,
pageCount: 0,
}
}
}
</script>
3.2 显示同一pdf文档的多个页面
pdf伴生方法
.createLoadingTask
可以分析pdf地址，并且分出各个属性
<template>
<div>
<pdf
v-for="i in numPages"
:key="i"
:src="src"
:page="i"
style="display: inline-block; width: 25%"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');
export default {
components: {
pdf
},
data() {
return {
src: loadingTask,
numPages: undefined,
}
},
mounted() {
this.src.promise.then(pdf => {
this.numPages = pdf.numPages;
});
}
}
</script>
3.3 打印所有页面
pdf伴生方法
.print()
<template>
<button @click="$refs.myPdfComponent.print()">print</button>
<pdf ref="myPdfComponent" src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"></pdf>
</template>
这个应该是点击展示所有分页
3.4 打印多个页面
<template>
<button @click="$refs.myPdfComponent.print(100, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14])">print</button>
<pdf ref="myPdfComponent" src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"></pdf>
</template>
这个应该是点击展示部分分页吧
3.5 获取文本内容
<template>
<div>
<button
@click="logContent"
>
log content
</button>
<pdf
ref="myPdfComponent"
src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
},
methods: {
logContent() {
this.$refs.myPdfComponent.pdf.forEachPage(function(page) {
return page.getTextContent()
.then(function(content) {
var text = content.items.map(item => item.str);
console.log(text);
})
});
}
}
}
</script>
3.6 完全体
<template>
<div>
<input type="checkbox" v-model="show">
<select v-model="src" style="width: 30em">
<option v-for="item in pdfList" :value="item" v-text="item"></option>
</select>
<input v-model.number="page" type="number" style="width: 5em"> /{{numPages}}
<button @click="rotate += 90">⟳</button>
<button @click="rotate -= 90">⟲</button>
<button @click="$refs.pdf.print()">print</button>
<div style="width: 50%">
<div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
<pdf v-if="show" ref="pdf" style="border: 1px solid red" :src="src" :page="page" :rotate="rotate" @password="password" @progress="loadedRatio = $event" @error="error" @num-pages="numPages = $event" @link-clicked="page = $event"></pdf>
</div>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf: pdf
},
data () {
return {
show: true,
pdfList: [
'',
'https://cdn.mozilla.net/pdfjs/tracemonkey.pdf',
'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/freeculture.pdf',
'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/annotation-link-text-popup.pdf',
'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/calrgb.pdf',
'https://cdn.rawgit.com/sayanee/angularjs-pdf/68066e85/example/pdf/relativity.protected.pdf',
'data:application/pdf;base64,JVBERi0xLjUKJbXtrvsKMyAwIG9iago8PCAvTGVuZ3RoIDQgMCBSCiAgIC9GaWx0ZXIgL0ZsYXRlRGVjb2RlCj4+CnN0cmVhbQp4nE2NuwoCQQxF+/mK+wMbk5lkHl+wIFislmIhPhYEi10Lf9/MVgZCAufmZAkMppJ6+ZLUuFWsM3ZXxvzpFNaMYjEriqpCtbZSBOsDzw0zjqPHZYtTrEmz4eto7/0K54t7GfegOGCBbBdDH3+y2zsMsVERc9SoRkXORqKGJupS6/9OmMIUfgypJL4KZW5kc3RyZWFtCmVuZG9iago0IDAgb2JqCiAgIDEzOAplbmRvYmoKMiAwIG9iago8PAogICAvRXh0R1N0YXRlIDw8CiAgICAgIC9hMCA8PCAvQ0EgMC42MTE5ODcgL2NhIDAuNjExOTg3ID4+CiAgICAgIC9hMSA8PCAvQ0EgMSAvY2EgMSA+PgogICA+Pgo+PgplbmRvYmoKNSAwIG9iago8PCAvVHlwZSAvUGFnZQogICAvUGFyZW50IDEgMCBSCiAgIC9NZWRpYUJveCBbIDAgMCA1OTUuMjc1NTc0IDg0MS44ODk3NzEgXQogICAvQ29udGVudHMgMyAwIFIKICAgL0dyb3VwIDw8CiAgICAgIC9UeXBlIC9Hcm91cAogICAgICAvUyAvVHJhbnNwYXJlbmN5CiAgICAgIC9DUyAvRGV2aWNlUkdCCiAgID4+CiAgIC9SZXNvdXJjZXMgMiAwIFIKPj4KZW5kb2JqCjEgMCBvYmoKPDwgL1R5cGUgL1BhZ2VzCiAgIC9LaWRzIFsgNSAwIFIgXQogICAvQ291bnQgMQo+PgplbmRvYmoKNiAwIG9iago8PCAvQ3JlYXRvciAoY2Fpcm8gMS4xMS4yIChodHRwOi8vY2Fpcm9ncmFwaGljcy5vcmcpKQogICAvUHJvZHVjZXIgKGNhaXJvIDEuMTEuMiAoaHR0cDovL2NhaXJvZ3JhcGhpY3Mub3JnKSkKPj4KZW5kb2JqCjcgMCBvYmoKPDwgL1R5cGUgL0NhdGFsb2cKICAgL1BhZ2VzIDEgMCBSCj4+CmVuZG9iagp4cmVmCjAgOAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDA1ODAgMDAwMDAgbiAKMDAwMDAwMDI1MiAwMDAwMCBuIAowMDAwMDAwMDE1IDAwMDAwIG4gCjAwMDAwMDAyMzAgMDAwMDAgbiAKMDAwMDAwMDM2NiAwMDAwMCBuIAowMDAwMDAwNjQ1IDAwMDAwIG4gCjAwMDAwMDA3NzIgMDAwMDAgbiAKdHJhaWxlcgo8PCAvU2l6ZSA4CiAgIC9Sb290IDcgMCBSCiAgIC9JbmZvIDYgMCBSCj4+CnN0YXJ0eHJlZgo4MjQKJSVFT0YK',
],
src:'',
loadedRatio: 0,
page: 1,
numPages: 0,
rotate: 0,
}
},
methods: {
password: function(updatePassword, reason) {
updatePassword(prompt('password is "test"'));
},
error: function(err) {
console.log(err);
}
}
}
</script>
除此之外还有
3.7 .createLoadingTask伴生函数的内部属性
3.7.1
computed: {
pdfUrl() {
return pdf.createLoadingTask({
url: this.url,
// CMapReaderFactory,
cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/",
cMapPacked: true,
});
},
},
cMapUrl 生成pdf的字体（可以本地也可以线上）
结论：vue-pdf 在实际使用中确实可以用于生成pdf,但还有部分东西不是很完善，比如
vue-pdf插件中文乱码问题
vue-pdf移动端支持不完善， vue-pdf-signature更好的选择
总的来说，vue-pdf用于一些简单的pdf前端实现是可以的，但目前vue-pdf实际使用场景在缩小，大家应该尽快转战 vue-pdf-signature，我也会尽快推出vue-pdf-signature的插件使用
