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>
相关推荐
AI导出鸭PC端7 小时前
预览即导出:告别AI文档格式崩塌,网页预览效果1:1落地Word
人工智能·pdf·word·流程图·豆包·ai导出鸭
hu55667987 小时前
小规模纳税人财务报表报送后如何导出报送pdf
pdf
__zRainy__7 小时前
基于计数信号量(Counting Semaphore)的 PDF 渲染并发控制方案
pdf
工具派10 小时前
从 git commit 到交付 PDF:我的一条在线工具流实录
git·elasticsearch·pdf
Li Ming&1 天前
Python办公自动化:利用Python批量将PDF转换为图片文件
python·pdf·pip
ji_shuke1 天前
Vue3 前端批量打印 PDF/图片踩坑记:跨域、合并打印、对话框闪退与按钮一直 loading
前端·pdf·状态模式·pdf打印
Am-Chestnuts1 天前
Mermaid流程图怎么导出Word/PDF?DS随心转批量保存AI多轮修改与源码
pdf·aigc·word·流程图
FL16238631291 天前
pdf批量转ofd本地离线操作简单支持win10及以上系统
pdf
Metaphor6921 天前
使用 Python 在 PDF 中插入、替换和删除图片
python·pdf
薛定猫AI1 天前
【技术干货】大模型文档结构化提取实战:Python解析PDF发票并批量生成CSV
java·python·pdf