您现在的位置是:首页 > 正文

vue-pdf使用及遇到的问题总结,ios使用vue-pdf会有白屏的bug

2024-04-01 03:37:50阅读 5

安装

npm install vue-pdf -S 或 yarn add vue-pdf

使用(本地pdf放在static目录下)

<template>
  <div class="super-flow-base-demo">
    <pdf v-for="i in numPages"
        :key="i"
        :src="src"
        :page="i"
        style="display: inline-block; width: 100%; overflow: hidden; overflow-y: scroll;"
      ></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

let loadingTask = pdf.createLoadingTask('./../../static/pdfwwcc.pdf')
export default {
  components: {
    pdf
  },
  data() {
    return {
      src: loadingTask,
      numPages: undefined,
    };
  },
  created() {
  },
  mounted() {
    // 获取总页数
    this.src.promise.then(pdf => {
      this.numPages = pdf.numPages;
    });
  },
  methods: {
  },
};
</script>

遇到的问题

npm i pdfjs-dist@2.5.207
npm i vue-pdf@4.2.0

yarn add pdfjs-dist@2.5.207
yarn add vue-pdf@4.2.0

修改pdf插件版本,重启就不报错了
在这里插入图片描述

ios使用vue-pdf会有白屏的bug

可以将vue-pdf替换[vue-pdf-sign]

网站文章

  • ps cc 生成html,Photoshop自定义工具扩展面板(支持PS CC 2019)

    ps cc 生成html,Photoshop自定义工具扩展面板(支持PS CC 2019)

    Photoshop自定义工具扩展面板(支持PS CC 2019)书法字体2018.12.26PS扩展面板这是一个可以简化Photoshop操作的PS扩展面板插件。简单的来说就是它可以把所有常用的功能按...

    2024-04-01 03:37:42
  • valgrind抑制误报

    1 指定多个抑制文件当valgrind检测出来的错误位于系统库(glibc)、第三方库,或者检测出来的错误不方便修改,但又不想每次都输出到错误列表中,可以使用自定义抑制文件抑制错误报告。抑制文件是文本文件,文件名无要求,一般定义为*.supp。需要抑制的错误较多时,可以用多个抑制文件,每个抑制文件都需要设置为--suppressions=<filename>.supp,如下:val...

    2024-04-01 03:37:34
  • C++知识点(4)

    GCC常用参数-ansi:关闭 gnu c 中与 ansi c 不兼容的特性 , 激活 ansi c 的专有特性 ( 包括禁止一些 asm inline typeof 关键字 , 以及 UNIX,va...

    2024-04-01 03:37:29
  • 简明易懂的JVM理解

    简明易懂的JVM理解

    简单易懂的Java虚拟机结构介绍

    2024-04-01 03:36:47
  • ubuntu20.04 python pycharm使用cv_bridge的问题

    ubuntu20.04 python pycharm使用cv_bridge的问题

    2、pycharm在 修改运行配置-环境变量 中添加上述后,仍旧报错:“

    2024-04-01 03:36:42
  • Oracle Database 12c升级到19c(Redhat Linux12.2.0.1 Upgrade to 19.3.0.0)

    Oracle Database 12c升级到19c(Redhat Linux12.2.0.1 Upgrade to 19.3.0.0)

    近两天,因为系统维护的需求,我需将原来的12c数据实例升级到19c,版本号12.2.0.1&gt;19.3.0(12.2.0.3),中间花了较多时间来折腾,不过结果不错,毕竟成功了 我的系统环境是小红帽Redhat Linux 7.6,参照一些外文资料,具体操作如下

    2024-04-01 03:36:35
  • 【转载】梯度下降算法的参数更新公式 热门推荐

    【转载】梯度下降算法的参数更新公式 热门推荐

    NN这块的公式,前馈网络是矩阵乘法。损失函数的定义也是一定的。 但是如何更新参数看了不少描述,下面的叙述比较易懂的: 1、在吴恩达的CS229的讲义的第四页直接给出参数迭代公式 在UFLDL中反向传导算法一节也是直接给出的公式 2、例子: 第一步:随机对比重(a,b)赋值并计算误差平方和(SSE) 第二步:通过对误差比重(a,b)求导计算出误差梯度(注:Y...

    2024-04-01 03:35:52
  • java的轻量锁,jvm第7节-锁(偏向锁,轻量锁,自旋锁)

    java的轻量锁,jvm第7节-锁(偏向锁,轻量锁,自旋锁)

    在介绍锁之前我们先介绍一个线程不安全的例子,一个全局的list,开2个线程往里面插入数据,代码如下:package com.jvm.day6.lock.demo;import java.util.Ar...

    2024-04-01 03:35:45
  • 前端之JS

    参考博客:http://www.cnblogs.com/liwenzhou/p/8004649.html JS基础语法: 0. JS引入方式   1. 直接在script标签里面写代码  2. 在单独的JS文件中写代码,然后通过script标签的src属性引入写好的JS文件1. 变量  1. var 变量名; var 变量名 = 值  2. 变量的命名 字母 数字 下划...

    2024-04-01 03:35:38
  • Ajax中的错误处理 - 优化你的编程体验

    Ajax中的错误处理 - 优化你的编程体验

    此外,我们还了解了一些高级技巧,如显示错误信息、错误分类处理和重试机制,以进一步优化错误处理的效果。在实际的开发中,根据具体的需求和场景,我们可以根据本文提供的示例代码进行适当的修改和定制,以满足实际...

    2024-04-01 03:34:58