使用vue引入pdf文件
vue使用iframe引入pdf文件在网上找的很多文章都显示需要添加pdf.js来引入vue文件，但是还有一个很简单的办法就是使用iframe框架引入pdf效果使用iframe框架引入的话代码会变得非常简洁<template><div class="app"><div class="agreement_picture"><div class="pdf"&g
·
vue使用iframe引入pdf文件
在网上找的很多文章都显示需要添加pdf.js来引入vue文件，但是还有一个很简单的办法就是使用iframe框架引入pdf
效果
使用iframe框架引入的话代码会变得非常简洁
<template>
<div class="app">
<div class="agreement_picture">
<div class="pdf">
<iframe :src="src" frameborder="0" style="width: 50vw; height:50vh"></iframe>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'page-one',
data () {
return {
src: 'https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf', //pdf地址,这里我用的是我本地的文件,你也可以使用后台的文件
dialogVisible: true
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
vue引入pdf.js来引入pdf文件
首先下载文件放在static里面并且命名为pdf
之后可以自己写组件，我是在pages里面添加了pdf文件夹，再添加两个文件,需要注意路劲，其他也没什么需要更改的地方
pdf.vue
<style>
.contract-modal {
position: absolute;
right: 15%;
width: 1000px;
height: 500px;
overflow: scroll;
background: rgba(139, 148, 171, 0.7);
padding: 20px 0 0;
z-index: 900;
}
.contract-modal .contract-detail {
margin: 0 auto;
max-width: 96%;
height: auto;
}
.contract-btns{
height: 50px;
background-color: #fff;
text-align: center;
padding-bottom:44px;
padding-top:10px;
}
#mycanvas {
min-height: 50vh;
background: #fff;
}
canvas{
margin: 0 auto;
display: block;
border-bottom:2px solid #aaa;
}
.close-btn{
position: absolute;
right: 15%;
width: 26px;
height: 26px;
z-index: 999;
background-color: #666;
border-radius: 50%;
cursor: pointer;
}
</style>
<template>
<div v-if='visible'>
<div class="contract-modal">
<div class="contract-detail"
id="contractDetail">
<div id="mycanvas" ref="mycanvas"></div>
<!--合同内容-->
<div class="contract-btns contract-operate" v-if="showBtns">
<button @click="commit" >合同内容有误</button>
<button @click="confirm">我已确认合同内容</button>
</div>
</div>
</div>
<div class="close-btn" @click="closeModal">
<span style="font-weight: bold; margin-top: 2px;display: inline-block;">X</span>
</div>
</div>
</template>
<script>
// ../../../static/pdf/build/pdf
import pdf from '../../../static/pdf/build/pdf'
export default {
name: 'md-contract',
props: {
visible: Boolean,
showBtns: {
type: Boolean,
default: false
}
},
data () {
return {}
},
watch: {
visible (val) {
if (val) {
this.contractError = false
this.$nextTick(()=>{
this.getPdf()
})
}
}
},
methods: {
handleError (status) { // 合同有误
this.contractError = status
},
closeModal () {
this.$emit('handleModal')
},
confirm () { // 我已确认合同内容
alert('success')
},
commit () { // 提交错误消息
alert('error')
},
getPage (pdf,pageNumber,container,numPages) { //获取pdf
let _this = this
pdf.getPage(pageNumber).then((page) => {
let scale = (container.offsetWidth/page.view[2])
let viewport = page.getViewport(scale)
let canvas = document.createElement("canvas")
canvas.width= viewport.width
canvas.height= viewport.height
container.appendChild(canvas)
let ctx = canvas.getContext('2d');
var renderContext = {
canvasContext: ctx,
transform: [1, 0, 0, 1, 0, 0],
viewport: viewport,
intent: 'print'
};
page.render(renderContext).then(() => {
pageNumber +=1
if(pageNumber<=numPages) {
_this.getPage(pdf,pageNumber,container,numPages)
}
})
})
},
getPdf () {
// 此中方式接受流形式返回
this.$refs.mycanvas.scrollTop =0
// let accessToken = cache.get('TOKEN').Authorization
// let url = `${config.baseUrls}/api/fund/v1/contractReports/previewContractContent?access_token=${accessToken}&id=${contractData.id}&contractUrl=${contractData.contractUrl}&.pdf`
let url = 'https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf'
let pdfjsLib = pdf
// /static/pdf/build/pdf.worker.js
pdfjsLib.PDFJS.workerSrc = '../../../static/pdf/build/pdf.worker.js'
let loadingTask = pdfjsLib.getDocument(url)
loadingTask.promise.then((pdf) =>{
let numPages = pdf.numPages
let container = document.getElementById('mycanvas')
let pageNumber = 1
this.getPage(pdf,pageNumber,container,numPages)
}, function (reason) {
alert(reason)
});
}
},
created () {
}
}
</script>
main.vue
<template>
<div class="innerPdf">
<div class="page-one">
<p>pdf.js demo</p>
<!--本地-->
<div style="margin-top: 10px">
<p>本地</p>
<button @click="check">点击</button>
<button @click="checkLocal">点击一下</button>
</div>
<!--服务器-->
<div style="margin-top: 30px">
<p>服务器</p>
<button @click="checkError">查看错误</button>
<button @click="checkNormal">查看有效</button>
<button @click="checkSuccess">查看服务器跨域返回流</button>
</div>
<!--上传文件-->
<div style="margin-top: 40px">
<input type="file" name="myfile" id="myfile" @change="preview($event)"/>
<!--<button @click="changeLocal">点击预览本地pdf</button>-->
<iframe v-if="showPdf" id='previewPdf' :src="src" height="560"
width="100%">
</iframe>
</div>
<!--canvas-->
<div style="margin-top: 30px;color: #70DB55">
<span style="font-weight: 600" @click="checkContract">点我试试</span>
</div>
<md-contract :visible="contractVisable"
:showBtns="true"
@handleModal="close">
</md-contract>
</div>
</div>
</template>
<script>
import mdContract from './Pdf'
export default {
name: 'page-one',
components: {
mdContract
},
data() {
return {
src: 'https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf',
showPdf: false,
contractVisable: false,
}
},
methods: {
check() {
window.open('https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf')
},
checkLocal() {
// let url = '/static/pdf/web/demo.pdf'
let url = 'demo.pdf'
window.open('../../../static/pdf/web/viewer.html?file=' + url)
},
checkError() {
let url = 'http://somedomain/doc/manuals/R-intro.pdf' // 报错跨域
window.open('../../../static/pdf/web/viewer.html?file=' + url)
},
checkNormal() {
let url = 'http://image.cache.timepack.cn/nodejs.pdf' // 有效 服务器配置跨域处理
window.open('../../../static/pdf/web/viewer.html?file=' + url)
},
checkSuccess() {
// 后台返回流的形式，也是我本人项目的使用
let url = 'https://dluat.hscf.com/api/esm/v1/contractTemplates/load/c08def54aa40412b8b511406fc0271d2/0?access_token=ea19dc0de8801b389ed5099a2297161d&name=cehsi.pdf'
// 当然上面的是可以的，但是此access_token 是有时效性的，只是放在这边当作个例子，至于最后我为什么加了个测试.pdf 是可以在浏览器标签叶上显示
window.open('../../../static/pdf/web/viewer.html?file=' + encodeURIComponent(url))
},
// 这是打开本地文件进行预览
preview(event) {
let files = document.getElementById('myfile').files[0]
if (files.type !== 'application/pdf') {
alert('只能上传一份pdf文件哦～')
return
}
this.showPdf = true
this.fileUrl = this.getObjectURL(files)
},
getObjectURL(file) {
let url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
}
return url;
},
checkContract() {
this.contractVisable = !this.contractVisable
},
close () {
this.contractVisable = false
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page-one button {
margin-left: 10px;
}
.innerPdf{
height: 80vh;
width: 60vw;
}
</style>
效果
使用这个的话就功能比较多，还能上传之类的
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)