vue2pdf在线预览移动端无法查看

问题:最开始使用frame写的,但是在PC端可以,在移动端无法预览,提示要下载。为解决此问题,使用了vue-pdf插件。

  1. npm i vue-pdf 安装插件

javascript 复制代码
<div>
    <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf" 
      style="display: inline-block;width: 100%;">
    </pdf>
</div>

<script>
data(){
    pdfSrc:"",//路径
    numPages: null, // pdf 总页数
}
methods:{
    getNumPages() {
            let loadingTask = pdf.createLoadingTask(this.pdfSrc)
            loadingTask.promise.then(pdf => {   
                this.numPages = pdf._pdfInfo.numPages//这里是页码,可能赋值不一样,可以打印看一下
                console.log("pdf",pdf,this.numPages)
            }).catch(err => {
                console.error('pdf 加载失败', err);
            })
    },
}
</script>
<style>
div {
    overflow:auto;
}
</style>
相关推荐
SamChan905 小时前
PDF页面旋转与CropBox陷阱:译文回填位置总是错位的根因实测
python·ai·pdf·wpf
万物皆智能8 小时前
pdf怎么转成图片?分享14种简单的PDF转图片工具
pdf
2501_9307077812 小时前
使用C#代码更改或删除 PDF 中的超链接
pdf
凤山老林1 天前
Spring Boot 集成 iText 7 实现动态 PDF 生成与电子签章:合同、报表场景实战
spring boot·后端·pdf·itext7·电子签章
泡海椒1 天前
趋势分析报表:jquick-pdf折线图PDF生成实战
java·大数据·运维·服务器·前端·pdf
泡海椒1 天前
金融报表开发:jquick-pdf K 线图 PDF 可视化解决方案
java·开发语言·金融·pdf
泡海椒1 天前
多维数据分析:jquick-pdf 热力图、雷达图 PDF 实战
数据挖掘·数据分析·pdf
程序员的账号1 天前
《深度学习入门2自制框架》中文PDF+源代码+斋藤康毅
人工智能·深度学习·pdf
web打印社区1 天前
远程打印:WebSocket 与 HTTP 轮询怎么选
前端·vue.js·websocket·网络协议·http·electron·pdf
SamChan901 天前
PDF翻译时页眉页脚总在捣乱?跨页重复文本块的检测与过滤实测
人工智能·python·ai·pdf·wpf