引用js文件
import PDFJS from 'pdfjs-dist'
下面是自己写的例子:
<template>
<div>
<div class="s_pdf">
<el-input
class="s_input_name"
placeholder="请输入姓名"
v-model="name"
size="small"
clearable>
</el-input>
<el-input
class="s_input_idCard"
placeholder="请输入身份证号"
v-model="idCard"
size="small"
clearable>
</el-input>
<el-button style="margin-left: 20px" type="primary" size="mini" icon="el-icon-document"
@click="showPdf">生成报告
</el-button>
<el-button style="margin-left: 5px" type="warning" size="mini" icon="el-icon-download" :disabled="isdisabled_dp"
@click="downloadPdf">导出报告
</el-button>
<span style="margin-left: 20px">
<el-button type="text" :key="index.id" size="mini" @click="setInput(index)" v-for="(info,index) in nameList">{{info.name}}</el-button>
</span>
<el-button type="text" @click="clearRecord()" v-show="false">清除搜索记录</el-button>
</div>
<div id="pdfdiv" class="pdfdiv">
</div>
</div>
</template>
<script>
import PDFJS from 'pdfjs-dist'
export default {
name: 'c-pdf',
props: ['pdfurl'],
data() {
return {
name: '',
idCard: '',
nameList: [],
isdisabled_dp: true,
pdfDoc: null,
pageNum: 1,
scale: 1.5,
url: '',
showUrl: ''
}
},
created() {
this.nameList = JSON.parse(window.localStorage.getItem('nameList'))
},
methods: {
/**
* 清除搜索记录方法
*/
clearRecord() {
window.localStorage.removeItem('nameList')
this.nameList = this.nameList = JSON.parse(
window.localStorage.getItem('nameList')
)
},
/**
* 存储搜索记录方法
*/
setNameList() {
let info = {
name: this.name,
idCard: this.idCard
}
if (this.nameList === null) {
this.nameList = []
this.nameList.push(info)
} else {
if (this.nameList.length > 2) {
for (let i = 0; i < this.nameList.length; i++) {
let nameOld = this.nameList[i].name
let idCard = this.nameList[i].idCard
if (nameOld !== info.name || idCard !== info.idCard) {
this.nameList.shift()
this.nameList.push(info)
}
break
}
} else {
for (let i = 0; i < this.nameList.length; i++) {
let nameOld = this.nameList[i].name
let idCard = this.nameList[i].idCard
if (nameOld !== info.name || idCard !== info.idCard) {
this.nameList.push(info)
}
break
}
}
}
let nameListStr = JSON.stringify(this.nameList)
window.localStorage.setItem('nameList', nameListStr)
this.nameList = JSON.parse(window.localStorage.getItem('nameList'))
},
/**
* 点击搜索记录填充输入框
*/
setInput(index) {
console.log(index)
this.name = this.nameList[index].name
this.idCard = this.nameList[index].idCard
},
renderPage(num) {
let vm = this
this.pdfDoc.getPage(num).then(function(page) {
var pdfdiv = document.getElementById('pdfdiv')
var viewport = page.getViewport(vm.scale)
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width
pdfdiv.appendChild(canvas)
var renderContext = {
canvasContext: ctx,
viewport: viewport
}
page.render(renderContext)
})
},
/**
* 查询生成报告
*/
showPdf() {
let vm = this
this.$http
.get(this.url, {
params: {
name: this.name,
identityCard: this.idCard
}
})
.then(response => {
console.log(response)
if (response.data.success === false) {
this.$message({
showClose: true,
message: response.data.msg + ':' + response.data.data.respMsg,
type: 'warning'
})
} else {
PDFJS.getDocument(this.showUrl).then(function(pdfDoc_) {
//初始化pdf
vm.pdfDoc = pdfDoc_
vm.page_count = vm.pdfDoc.numPages
for (var i = 0; i < vm.page_count; i++) {
vm.renderPage(i)
}
})
this.isdisabled_dp = false
this.setNameList()
console.log(response)
}
})
.catch(error => {
console.log(error)
})
},
/**
* 下载报告
*/
downloadPdf() {
this.$http
.get(this.showUrl, { responseType: 'blob' })
.then(response => {
console.log(response)
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
// 返回的header Content-Disposition:attachment; filename=elmeast-report-2018-2.pdf
let head = response.headers['content-disposition']
let fname = this.name + '-' + this.idCard + '.pdf'
link.href = url
link.setAttribute('download', fname)
document.body.appendChild(link)
link.click()
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
<style scoped>
.s_input_name {
width: 250px;
}
.s_input_idCard {
width: 250px;
margin-left: 5px;
}
.s_pdf {
/*border:red solid thin;*/
/*top: 10px;*/
/*left: 20px;*/
margin-left: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
position: relative;
}
.pdfdiv {
/*left: 20px;*/
/*width: 100px;*/
margin: 20px;
/*border:black solid thin;*/
text-align: center;
position: relative;
/*top: 30px;*/
}
</style>