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/pdfimport 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 = falsethis.$nextTick(()=>{this.getPdf()})}}},methods: {handleError (status) { // 合同有誤this.contractError = status},closeModal () {this.$emit('handleModal')},confirm () { // 我已確認合同內容alert('success')},commit () { // 提交錯誤消息alert('error')},getPage (pdf,pageNumber,container,numPages) { //獲取pdflet _this = thispdf.getPage(pageNumber).then((page) => {let scale = (container.offsetWidth/page.view[2])let viewport = page.getViewport(scale)let canvas = document.createElement("canvas")canvas.width= viewport.widthcanvas.height= viewport.heightcontainer.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 +=1if(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.jspdfjsLib.PDFJS.workerSrc = '../../../static/pdf/build/pdf.worker.js'let loadingTask = pdfjsLib.getDocument(url)loadingTask.promise.then((pdf) =>{let numPages = pdf.numPageslet container = document.getElementById('mycanvas')let pageNumber = 1this.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 = truethis.fileUrl = this.getObjectURL(files)},getObjectURL(file) {let url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = 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>

效果

使用這個的話就功能比較多，還能上傳之類的

總結

以上是生活随笔為你收集整理的使用vue引入pdf文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。