Проект связан с проблемой просмотра электронных договоров на мобильном терминале, я пробовал три решения до и после, и это действительно яма, у каждого из трех решений есть свои преимущества.
1. pdf-vue
Используйте плагин vue-pdf напрямую.Код ядра pdf.js, но он просто инкапсулируется сам по себе.Преимущество в том, что это удобно и быстро, но недостаток в том, что электронная подпись не может быть загружена.
адрес гитхаба:GitHub.com/Franck бесплатно…
1. npm установить pdf-vue --save
2. Код шаблона
<template>
<div class="pdf" v-show="fileType === 'pdf'">
<p class="arrow">
// 上一页
<span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview</span>
{{currentPage}} / {{pageCount}}
// 下一页
<span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">Next</span>
</p>
// 自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了
<pdf
:src="src" // src需要展示的PDF地址
:page="currentPage" // 当前展示的PDF页码
@num-pages="pageCount=$event" // PDF文件总页码
@page-loaded="currentPage=$event" // 一开始加载的页面
@loaded="loadPdfHandler"> // 加载事件
</pdf>
</div>
</template>
3. js-код
import pdf from 'vue-pdf'
export default {
components: {pdf},
data () {
return {
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
fileType: 'pdf', // 文件类型
    src: '', // pdf文件地址
}
},
  created: {
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    this.src = pdf.createLoadingTask(this.src)
  }
method: {
// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
changePdfPage (val) {
// console.log(val)
if (val === 0 && this.currentPage > 1) {
this.currentPage--
// console.log(this.currentPage)
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage++
// console.log(this.currentPage)
}
},
// pdf加载时
loadPdfHandler (e) {
this.currentPage = 1 // 加载的时候先加载第一页
}
}
}
Это очень удобно в использовании, особенно если вам нужно только перелистывать страницы или не нужно переворачивать страницы, настоятельно рекомендуется.
2. pdf-распределение
pdf-dist также является компонентом на основе pdf.js, но он не упакован и нуждается в настройке сам по себе.Преимущество в том, что его можно настроить и он может удовлетворить особые потребности.Недостаток в том, что его нужно упаковать сам, а водяной знак можно загрузить.Я не могу его загрузить, поэтому я все еще не использовал его.
1. npm установить pdf-dist --save
2. Упакуйте pdf.vue
<template>
<div class="cpdf" id="cpdf">
<div class="center">
<canvas class="canvasstyle" id="the-canvas"></canvas>
<div class="contor">
<button @click="prev" style="margin-right: 10px">上一页</button>
<span>Page: <span v-text="page_num"></span> / <span v-text="page_count"></span></span>
<button @click="next" style="margin-left: 10px">下一页</button>
</div>
</div>
</div>
</template>
<script>
import PDFJS from 'pdfjs-dist'
export default {
name: 'c-pdf',
// 接收父组件传来的参数
props: ['pdfurl'],
components: { },
data () {
return {
pdfDoc: null, // pdfjs 生成的对象
pageNum: 1, //
pageRendering: false,
pageNumPending: null,
scale: 1, // 放大倍数
page_num: 0, // 当前页数
page_count: 0, // 总页数
maxscale: 2, // 最大放大倍数
minscale: 0.8// 最小放大倍数
}
},
methods: {
renderPage (num) { // 渲染pdf
let vm = this
this.pageRendering = true
let canvas = document.getElementById('the-canvas')
let ctx = canvas.getContext('2d')
let bsr =
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1
let dpr = window.devicePixelRatio || 1
let ratio = dpr / bsr
// Using promise to fetch the page
this.pdfDoc.getPage(num).then(function (page) {
var viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
// alert(vm.canvas.height)
canvas.height = ratio * viewport.width
canvas.width = ratio * viewport.height
canvas.style.width = 1.5 * viewport.width + 'px'
canvas.style.height = 1 * viewport.height + 'px'
ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
}
var renderTask = page.render(renderContext)
// Wait for rendering to finish
renderTask.promise.then(function () {
vm.pageRendering = false
if (vm.pageNumPending !== null) {
// New page rendering is pending
vm.renderPage(vm.pageNumPending)
vm.pageNumPending = null
}
})
})
vm.page_num = vm.pageNum
},
addscale () { // 放大
if (this.scale >= this.maxscale) {
return
}
this.scale += 0.1
this.queueRenderPage(this.pageNum)
},
minus () { // 缩小
if (this.scale <= this.minscale) {
return
}
this.scale -= 0.1
this.queueRenderPage(this.pageNum)
},
prev () { // 上一页
let vm = this
if (vm.pageNum <= 1) {
return
}
vm.pageNum--
vm.queueRenderPage(vm.pageNum)
},
next () { // 下一页
let vm = this
if (vm.pageNum >= vm.page_count) {
return
}
vm.pageNum++
vm.queueRenderPage(vm.pageNum)
},
closepdf () { // 关闭PDF
this.$emit('closepdf')
},
queueRenderPage (num) {
if (this.pageRendering) {
this.pageNumPending = num
} else {
this.renderPage(num)
}
}
},
computed: {
ctx () {
let id = document.getElementById('the-canvas')
return id.getContext('2d')
}
},
mounted () {
let vm = this
PDFJS.getDocument(vm.pdfurl).then(function (pdfDoc_) { // 初始化pdf
vm.pdfDoc = pdfDoc_
vm.page_count = vm.pdfDoc.numPages
vm.renderPage(vm.pageNum)
})
}
}
</script>
<style lang="stylus" scoped>
.cpdf {
display: flex;
justify-content: center;
align-items: center;
.center {
text-align: center;
height: 100%;
overflow: hidden;
padding-top: 20px;
.contor {
position: fixed;
bottom: 30px;
left: 0;
width: 100%;
z-index: 99999;
font-size 30px
margin-top 20px
margin-bottom: 10px;
}
}
}
</style>
3. Непосредственно как компонент, на него можно ссылаться
import cdpdf from '../../../components/pdf.vue'
<cdpdf :pdfurl="pdfurl"></cdpdf>
В начале проекта использовался pdf-dist, т.к. ЭЦП потом нельзя было вывести:
Warning: Unimplemented widget field type "Sig", falling back to base field type.
Я перерыл кучу методов из интернета, мол, исходный код pdf.work.js нужно модифицировать, и глобальный поиск AnnotationFlag.HIDDEN:
if(data.fieldType==='Sig') {
warn('unimplemented annotation type: Widget signature');
// 注释下面这行代码
this.setFlags(AnnotationFlag.HIDDEN);
}
Возможно, поэтому мобильный терминал использует браузер WeChat.Комментировать код по-прежнему не так просто, мы можем только думать о других способах.
3. pdf.js
В итоге я применил самый тупой способ стащить демку pdf.js прямо с GitHub, завернуть HTML-файл в демку тегами iframe и применить напрямую, что отлично решает проблему электронных подписей:
1. Получите исходный код с GitHub или загрузите его прямо с этого адреса.
Mozilla.GitHub.IO/PDF Просто/ТТ…
После загрузки положите его под публичный файл (3.x Леса)
2. Тег iframe прямо и грубо устанавливает src
<iframe :src="pdfUrl" :style="{height: Height}" style="width: 100%"></iframe>
this.pdfUrl = '../pdf/web/viewer.html?file=' + this.pdfurl, +'PDF'
pdfUrl是iframe标签的URL，pdfurl是需要查看的PDF文件的url
Суммировать
Пока код, который может удовлетворить требования, является хорошим кодом, мой проект заключается в просмотре PDF-файла на мобильном терминале.Поскольку в файле есть электронная подпись, я пробовал несколько схем.Я лично рекомендую вторую схему. Если нет случая электронной подписи.
Официальный аккаунт регулярно обновляет актуальный боевой и базовый блог, и братья и сестры приглашаем вас обратить внимание!