vue实现移动端在线预览pdf

1.安装vue-pdf

命令:npm install --save vue-pdf

安装的版本为

2.代码块

<template><div class="pdf"><p class="arrow"><span @click="changePdfPage(0)" class="turn">上一页</span>{{currentPage}} / {{pageCount}}<span @click="changePdfPage(1)" class="turn">下一页</span></p><pdf :src="src" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage"></pdf></div>
</template>
<script>
import pdf from 'vue-pdf'
export default {name: 'Pdf',components: {pdf},data () {return {numPages: '',src: '',currentPage: 1,pageCount: 0,pdfUrl1: '/cn.pdf',pdfUrl2: '/en.pdf'}},mounted () {if (this.$route.query.id === 'zh') {this.loadPdf(this.pdfUrl1)} else {this.loadPdf(this.pdfUrl2)}},methods: {loadPdf (url) {this.src = pdf.createLoadingTask(url)this.src.promise.then((pdf) => {this.numPages = pdf.numPages})},changePdfPage (val) {if (val === 0 && this.currentPage > 1) {this.currentPage--}if (val === 1 && this.currentPage < this.pageCount) {this.currentPage++}}}
}
</script>
<style lang="less" scoped>
.pdf{width: 100%;height: 100%;padding-top: 1.4rem;box-sizing: border-box;.arrow{width: 100%;height: 0.8rem;box-sizing: border-box;padding: 0 1rem;display: flex;flex-direction: row;justify-content: space-between;align-items: center;font-size: 0.3rem;.turn{font-size: 0.22rem;}}
}
</style>

其中cn.pdf跟en.pdf为本地pdf文件,存放在public文件夹下

项目打包以后生成js文件,但生成的这js文件不在js文件夹中

解决办法

1.修改node-modules >> vue-pdf >>src>> vuePdfNosss.vue

2.修改vue.config.js中的配置文件

我是这样解决的,仅供程序猿小伙伴们参考吧,如果有什么问题,可以加我加微信,共同探讨
微信号:Success_wyc

参考文章:vue-pdf

感谢大佬们的无私奉献 ,才有后来者的一路顺风

vue实现移动端在线预览pdf相关推荐

手机端与PC端在线预览PDF
问题场景公司需要把出具的报告在PC端在线预览,之前一直用embed标签解决,效果很好.产品提出在手机端(微信链接或者手机浏览器)也要在线预览,尴尬的是安卓端提示的是下载,IOS端只能看不能滑动.经一 ...
Vue项目H5移动端在线预览PDF文件
1.安装pdfh5插件 npm install pdfh5 --save 2.使用 <template><div id="app"><div id=& ...
移动端在线预览pdf，word资源
问题1:https网页不支持嵌入另一站点上传的http资源报错:Mixed Content: The page at 'https://xxx.html' was loaded over HTTPS ...
html预览pdf上的电子印章,移动端在线预览pdf显示签名签章pdf显示多页
效果如图,可显示多页pdf,可显示签章,在移动设备也一样 Document .lightbox{ position: fixed; top: 0px; left: 0px; height: 100%; ...
vue配合element 实现在线预览pdf文档
使用插件 npm install --save vue-pdf <template><div id="app"><el-button type=&qu ...
vue调用手机浏览器打开pdf_vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法...
目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受 ...
uni-app移动端-H5-微信小程序在线预览pdf，图片，视频
封装了一个插件,可直接导入hbuilderx查看使用: 插件地址:uni-app移动端-H5-微信小程序在线预览pdf,图片,视频 <template><view class=&qu ...
前端【vue】实现文档在线预览功能，在线预览pdf、word、xls、ppt等office文件
前端江太公前端实现文档在线预览功能最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...
网页嵌入pdf、在线预览pdf工具及插件（转）
摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...