位置: IT常识 - 正文

vue中如何使用vue-pdf及相应报错解决(vue中如何使用weboffice)

编辑:rootadmin
vue中如何使用vue-pdf及相应报错解决

目录

一、安装npm 依赖

二、引入组件

1、html中使用组件

单页

多页 

2、数据处理

单页

多页 

三、项目使用--代码部分

四、报错解决


推荐整理分享vue中如何使用vue-pdf及相应报错解决(vue中如何使用weboffice),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中如何使用ajax,vue中如何使用weboffice,vue中如何使用vuex,vue中如何使用路由,vue中如何使用vue-json-excel,vue中如何使用vuex,vue中如何使用vue-json-excel,vue中如何使用vuex,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

使用vue-pdf组件实现文件预览功能 并在文件上增加操作按钮vue3不支持vue-pdf,vue3项目用pdfjs-dist一、安装npm 依赖

1、在根目录下输入一下命令

npm i pdfjs-dist@2.5.207 --savenpm i vue-pdf@4.2.0 --savevue中如何使用vue-pdf及相应报错解决(vue中如何使用weboffice)

2、修改pacakge.json文件 

"dependencies": { "pdfjs-dist": "2.5.207", "vue-pdf": "4.2.0", },二、引入组件import pdf from 'vue-pdf'export default { name: 'App', components: { pdf }, ···}1、html中使用组件单页<pdf :src="file"></pdf>多页 <pdf v-for="i in pageNum" :key="i" :src="file" :page="i"></pdf>2、数据处理单页export default { ··· data () { return { file: "/pdf/test.pdf" } }}多页 export default { ··· data () { return { file: "/pdf/test.pdf", pageNum: 1 } }, methods: { getPageNum () { let loadingTask = pdf.createLoadingTask(this.file) loadingTask.promise.then(pdf => { this.pageNum = pdf.numPages }).catch(err => { console.error('pdf加载失败', err); }) } }, mounted () { this.getPageNum() }}三、项目使用--代码部分<template> <div class="pdf_wrap"> <pdf class="pdfView" v-for="item in pageNum" :key="item" :src="pdfUrl" :page="item"></pdf> <div class="btnCont"> <div class="savebtn" @click="sign">确认</div> </div> </div></template><script>import pdf from 'vue-pdf'import { protocolGet } from "../../../api/validation/shareagreement";//调用的接口export default { components: { pdf }, props: {}, data() { return { title: this.$route.meta?.title || '', pdfUrl:'', pageNum: 1 } }, watch: {}, computed: {}, methods: { getprotocolGet(){ protocolGet().then((res)=>{ if(res.code==200){ this.pdfUrl= res.data.contractUrl//获取到的协议展示 this.getPageNum();//pdf分页处理 } }) }, getPageNum () { let loadingTask = pdf.createLoadingTask(this.pdfUrl,{withCredentials: false}) loadingTask.promise.then(pdf => { this.pageNum = pdf.numPages }).catch(err => { console.error('pdf加载失败', err); }) }, sign() { this.$router.push({ path: '/xxx', }) }, }, created() { this.getprotocolGet() }, mounted() { },}</script><style>.pdf_wrap{ height: 100%; padding-bottom: 1.4rem; background-color: #fff;}</style><style scoped>.pdf_wrap .btnCont { position: fixed; bottom: 0rem; left: 0; background-color: #fff; padding: 0.1rem 0 .40rem 0; width: 100%; border: 0; text-align: center;}.pdf_wrap .btnCont .savebtn{ color: #fff; display: inline-block; height: 0.8rem; line-height: 0.8rem; border-radius: 0.4rem; width: 6.9rem; margin: auto; font-size: 0.28rem; background-color: #ff0b95;}</style>四、报错解决

1、这种情况就是跨域了找后台解决一下即可

2、 这种情况是pdf还没加载出来就去渲染导致页面pageNum找不到,调用接口加载完成后再去渲染pageNum

3、报这个错误加上  {withCredentials: false} ,报错就没有了

本文链接地址:https://www.jiuchutong.com/zhishi/281288.html 转载请保留说明!

上一篇:枇杷叶的功效与作用(图文)(枇杷叶的功效与作用及副作用)

下一篇:cpqa1000.exe是安全进程吗 cpqa1000进程有什么作用

  • vivo怎么看屏幕使用时间(vivo怎么看屏幕分辨率)

    vivo怎么看屏幕使用时间(vivo怎么看屏幕分辨率)

  • word最大的字怎么调(word里最大的字号)

    word最大的字怎么调(word里最大的字号)

  • IPhone12pro激光雷达有什么用(iPhone12pro激光雷达怎么打开)

    IPhone12pro激光雷达有什么用(iPhone12pro激光雷达怎么打开)

  • PPT文件播放提示媒体不可用

    PPT文件播放提示媒体不可用

  • 小米桌面便签怎么关闭(小米便签图标)

    小米桌面便签怎么关闭(小米便签图标)

  • 快手限制流量是怎么回事(快手上的限流)

    快手限制流量是怎么回事(快手上的限流)

  • 华为手机图片怎么打马赛克(华为手机图片怎么拼图在一起)

    华为手机图片怎么打马赛克(华为手机图片怎么拼图在一起)

  • 苹果手机抹掉iphone是什么意思(苹果手机抹掉iphone后还会锁定屏幕不)

    苹果手机抹掉iphone是什么意思(苹果手机抹掉iphone后还会锁定屏幕不)

  • qq消息声音突然不响了(为什么qq消息声音小)

    qq消息声音突然不响了(为什么qq消息声音小)

  • 变频器是什么(abb变频器是什么)

    变频器是什么(abb变频器是什么)

  • 杂志锁屏是什么意思(杂志锁屏是什么意思,可以关掉吗)

    杂志锁屏是什么意思(杂志锁屏是什么意思,可以关掉吗)

  • 为什么微信红包领不了但已经实名认证了(为什么微信红包过了24小时没有退回来)

    为什么微信红包领不了但已经实名认证了(为什么微信红包过了24小时没有退回来)

  • 闲鱼账号一个手机可以注册几个(闲鱼一个手机号只能注册一个吗)

    闲鱼账号一个手机可以注册几个(闲鱼一个手机号只能注册一个吗)

  • 手机可以剪辑视频吗(手机可以剪辑视频发抖音吗)

    手机可以剪辑视频吗(手机可以剪辑视频发抖音吗)

  • 手机升级与不升级的区别(手机升级与不升级哪个好)

    手机升级与不升级的区别(手机升级与不升级哪个好)

  • 测距仪有什么用途(测距仪有什么用途和作用)

    测距仪有什么用途(测距仪有什么用途和作用)

  • 淘宝查号截图怎么弄(做单淘宝查号截图是哪个图)

    淘宝查号截图怎么弄(做单淘宝查号截图是哪个图)

  • 小米9反向充电怎么用(小米9反向充电可以给苹果充电吗)

    小米9反向充电怎么用(小米9反向充电可以给苹果充电吗)

  • iphone6下载的视频在哪里(苹果6显示视频下载出错)

    iphone6下载的视频在哪里(苹果6显示视频下载出错)

  • 电池属于开票中哪一类(电池开票属于什么分类)

    电池属于开票中哪一类(电池开票属于什么分类)

  • wordword编辑限制保护怎么办(world 限制编辑)

    wordword编辑限制保护怎么办(world 限制编辑)

  • CarrierEditor教你不越狱修改IOS设备运营商logo(carrier profile)

    CarrierEditor教你不越狱修改IOS设备运营商logo(carrier profile)

  • js实现数组去重的方式(7种)(js写数组去重)

    js实现数组去重的方式(7种)(js写数组去重)

  • mysql元数据锁是什么(数据库 元数据)

    mysql元数据锁是什么(数据库 元数据)

  • 预收账款开票怎么做账
  • 不动产经营租赁服务包括哪些
  • 如何理解合并报表中少数股东损益的抵消
  • 小微企业亏损还用缴残保金吗
  • 预付押金是否可以作为成本
  • 公司净资产如何查询
  • 一般纳税人建账建几本帐
  • 酒店应不应该为员工提供澡堂
  • 盘盈的固定资产计入什么科目
  • 营业执照年审后日期会变吗
  • 公司阅览室布置图片
  • 私人帐户可以给别人用吗
  • 含税金是什么意思
  • 支付境外销售佣金增值税扣缴
  • 个人所得税未缴算偷税吗
  • 零申报资产总额填注册资本怎么办呢
  • 土地闲置费能否扣除
  • 劳务派遣公司支付劳务费怎么做账
  • 三个点的专票要交多少税
  • 预缴税金跨区域涉税在哪查询
  • win10取消登陆密码
  • linux acl配置命令
  • 火车票可以报账吗
  • PHP:xml_parse_into_struct()的用法_XML解析器函数
  • PHP:xml_set_external_entity_ref_handler()的用法_XML解析器函数
  • php测试成功的邮件是什么
  • 电脑qq聊天框变成一侧显示的软件版本
  • win7旗舰版系统怎么样
  • php类型判断
  • PHP:Memcached::increment()的用法_Memcached类
  • 蓝桥杯等级
  • 影响安全库存的因素包括
  • php自定义表单系统
  • php数据库编程
  • win10本地模式
  • spring integration使用:消息转换器
  • php实现微信支付功能
  • php网站用什么软件修改
  • 组装设备配件入什么科目
  • 企业借款生产存货发生的借款费用均应予以资本化
  • 所得税汇算清缴前取得跨年发票
  • 航天信息发票怎么抵扣
  • 上月未结账本月是否能记账
  • 房地产开发间接费用和开发费用的区别
  • sql server 实现数据值加一减一
  • SQL Server 2008 R2占用cpu、内存越来越大的两种解决方法
  • sql server row_number over
  • 无偿调拨资产怎么提折旧
  • 工会经费税务代收是什么意思
  • 银行对账单电脑上怎么导出
  • 累计预扣法利弊
  • 现金短缺与溢余的区别
  • 应付利息属于什么负债
  • 上年度库存商品错误如何更正
  • 进项税和销项税月末怎么结转
  • 企业为职工购买互助保障项目经费可以有什么开支
  • 企业应如何正确经营
  • 电梯在固定资产里属于什么设备类别
  • 打印机向windows发送消息
  • windows自带邮件应用
  • 扩展卷不相邻怎么办
  • freebsd ip配置
  • win7winxp双系统怎么装
  • linux读取命令
  • 红帽linux6.0安装教程
  • windows 10 build 21382
  • 创建react native项目
  • [个人学习笔记]Android 从网络获取json并解析 --Demo
  • django orm外键
  • unity3d颜色
  • div-css
  • css中列表样式
  • sort 函数
  • unity3ds
  • unity3d项目
  • 控制游戏类型
  • Android 4.4 Dialog 被状态栏遮挡的解决方法
  • javascript 数组删除
  • 电子发票专用章怎么设置
  • 武汉洪山实验中学是初中还是高中
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设