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刀刀13 小时前
Kimi 文档导出格式错乱、排版丢失、导出报错?AI 导出鸭一键智能适配,稳定输出规范 Word、PDF,高效解决各类导出难题
人工智能·pdf·word·ai导出鸭
Ai-_Man13 小时前
豆包智能体把对话批量导出为Word或PDF的正确顺序
人工智能·ai·小程序·pdf·word
SamChan9014 小时前
FastAPI+Celery+Redis搭建企业级PDF翻译异步任务系统
redis·后端·python·pdf·wpf·fastapi
SamChan902 天前
用Playwright端到端测试PDF翻译功能:Web自动化测试实战
前端·python·ai·pdf·wpf
AI英德西牛仔2 天前
千问导出 pdf 颜色不一样怎么办,选用 AI 导出鸭优化格式转换,多维度剖析千问内容 PDF 变色各类成因
人工智能·ai·chatgpt·pdf·deepseek·ai导出鸭
赵广陆2 天前
企业实战:主体识别
langchain·pdf·langgraph
AI英德西牛仔2 天前
豆包导出 pdf 颜色不一样怎么办,选用 AI 导出鸭优化文档导出,结合行业白皮书数据解析色彩失真成因
人工智能·ai·chatgpt·pdf·deepseek·ai导出鸭
薰珞婷紫小亭子2 天前
如何解决IEEE期刊LaTeX 模版编译pdf出现大空白的问题
经验分享·pdf
Hello-FPGA3 天前
AI 如何自动通过 PDF 原理图生成管脚映射
人工智能·fpga开发·pdf
阿部多瑞 ABU3 天前
告别手工核图:基于 .NET + MuPDFCore 的 CAD 等轴测 PDF 材料表提取与新旧版本对比实战
后端·算法·ui·pdf·c#