保姆级vue-pdf的使用过程

第一步  引入vue-pdf

npm install --save vue-pdf

第二步 按照需求我们慢慢进行

01.给你一个pdf文件的url,需要在页面渲染

代码

<template>
  <div>
    <pdf
      ref="pdf"
      :src="url">
    </pdf>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  data() {
    return {
      url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
    }
  }
}
</script>

这只是初体验,如果你的pdf只有一页,这样写当然没什么问题,但是当我们呢pdf 有很多页的时候,你会发现,这行不通了。所以,接下来,我们来看看怎么让它显示多页。

02.渲染多页面的pdf

<template>
  <div>
    <pdf v-for="i in numPages" :key="i"  :src="url" :page="i"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  data() {
    return{
      url: '',
      numPages: 1,
      pdf: ''
    }
  },
  created() {
    this.pdf = require('vue-pdf')
    console.log('获取的pdf', this.pdf)
  },
  mounted: function() {
    this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf")
  },
  methods: {
    getNumPages(url) {
      var loadingTask = pdf.createLoadingTask(url)
      // var loadingTask = this.pdf.default.createLoadingTask(url)
      loadingTask.promise.then(pdf => {
        this.url = loadingTask
        this.numPages = pdf.numPages
      }).catch((err) => {
        console.error('pdf加载失败')
      })
    },
  }
}
</script>

这里边如果你省去了promise,控制台会报错如下

 vue.runtime.esm.js:4605 [Vue warn]: Error in mounted hook: "TypeError: loadingTask.then is not a function"

还有需要了解的是你的 vue-pdf对象可以通过import去引,也可以通过require去引

各个属性:

  • url :pdf 文件的路径,可以是本地路径,也可以是在线路径。
  • numPages : pdf 文件总页数。

getNumPages 计算总页数,顺便给url和numPages赋值。

注意啊,这句不一定非要写到mounted里面,你想写哪就写哪,比如你前端请求后端,后端返回一个pdf 的url,在那里写就行,写在你需要的地方。

03.想不想让你的pdf带有分页交互及打印的功能,直接代码

<template>
  <div>
    <div class="tools" style="display: flex;justify-content: center;margin: 30px">
      <el-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="prePage" class="mr10"> 上一页</el-button>
      <el-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="nextPage" class="mr10"> 下一页</el-button>
      <div class="page" style="margin-top: 10px">{{pageNum}}/{{pageTotalNum}} </div>
      <el-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="clock" class="mr10"> 顺时针</el-button>
      <el-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="counterClock" class="mr10"> 逆时针</el-button>
    </div>
    <pdf ref="pdf"
         :src="url"
         :page="pageNum"
         :rotate="pageRotate"
         @progress="loadedRatio = $event"
         @page-loaded="pageLoaded($event)"
         @num-pages="pageTotalNum=$event"
         @error="pdfError($event)"
         @link-clicked="page = $event">
    </pdf>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'Home',
  components: {
    pdf
  },
  data() {
    return {
      url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0,
    }
  },
  mounted: function() {},
  methods: {
    // 上一页函数,
    prePage() {
      var page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },
    // 下一页函数
    nextPage() {
      var page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },
    // 页面顺时针翻转90度。
    clock() {
      this.pageRotate += 90
    },
    // 页面逆时针翻转90度。
    counterClock() {
      this.pageRotate -= 90
    },
    // 页面加载回调函数,其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e
    },
    // 其他的一些回调函数。
    pdfError(error) {
      console.error(error)
    },
  }
}
</script>

  • page: 当前显示的页数,比如第一页page=1
  • rotate : 旋转角度,比如0就是不旋转,+90,-90 就是水平旋转。
  • progress :当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了。
  • page-loaded :页面加载成功的回调函数,不咋能用到。
  • num-pages :总页数
  • error :加载错误的回调
  • link-clicked:单机pdf内的链接会触发。

04.加载本地pdf的功能

先安装file-loader:

npm install --save file-loader

 然后在vue.config.js中加入以下内容:

module.exports = {
    chainWebpack: config => {
        const fileRule = config.module.rule('file')
        fileRule.uses.clear()
        fileRule
            .test(/\.pdf|ico$/)
            .use('file-loader')
            .loader('file-loader')
            .options({
                limit: 10000,
            })
    },
    publicPath: './'
}

之后再url:require("../assets/1.pdf")就没有任何问题了,注意,vue-pdf src接收的是string对象,如果直接传url我这里报错了,你可能需要传url.default一下。

其他

打印界面字符乱码:

这个我倒是碰到了,谷歌浏览器打印的时候,预览界面真的变成了 真·方块字 ,全是方块。这个问题是因为你pdf中使用了自定义字体导致的,具体解决方案如下:

首先,找到这个文件:node_modules/vue-pdf/src/pdfjsWrapper.js

然后根据github上这个issue,其中红色的是要删掉的,绿色的是要加上去的,照着改就可以解决了。

地址: github.com/FranckFreib…

根据我的实际测试,是可以解决打印乱码的问题的。

跨域问题:

网上用pdf.js 很多都会遇到跨域问题,这个我今天实际应用到自己的项目里面了,由于我服务端设置了跨域,所以没有出现跨域的问题,如果出现跨域需要修改你后端的请求头。

写到这里已经是下班了,感谢老铁们的点赞,你们的点赞是我努力进步的动力

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/141744.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

scDrug:从scRNA-seq到药物反应预测

scRNA-seq技术允许在转录组水平上对数千个细胞进行测量。scRNA-seq正在成为研究肿瘤微环境中细胞成分及其相互作用的重要工具。scRNA-seq也被用于揭示肿瘤微环境模式与临床结果之间的关联&#xff0c;并在复杂组织中剖析药物治疗的细胞特异性效应。scRNA-seq的最新进展推动了疾…

postswigger 靶场(CSRF)攻略-- 3.令牌验证

靶场地址&#xff1a; https://portswigger.net/web-security/csrf 令牌(token) 验证取决于令牌(token) 的存在 题目中已告知易受攻击的是电子邮件的更改功能&#xff0c;而目标是利用 csrf 漏洞更改受害者的电子邮件地址&#xff0c;最后给出了登录凭据&#xff1a;wiener:pet…

SaaS 电商设计 (三) 如何做大促压测

一.背景&目标 1.1 常见的压测场景 电商大促:一众各大厂的促销活动场景,如:淘宝率先推出的天猫双11,而后京东拉出的京东 618 .还是后续陆陆续续的一些年货节, 3.8 女神节等等.都属于一些常规的电商大促 票务抢购:常见的如承载咱们 80,90 青春回忆的 Jay 的演唱会,还有普罗…

LLM 大模型向量数据库技术架构浅析

▼最近直播超级多&#xff0c;预约保你有收获 近期直播&#xff1a;《LLM 大模型向量数据库技术架构剖析和应用案例实战》 —1— AI 智能时代&#xff0c;开发者需要一个真正的向量数据库吗&#xff1f; 答案很简单&#xff0c;这取决于开发者的应用场景。举个例子&#xff0c;…

内网穿透的应用-如何使用CFImagehost搭建简洁易用的私人图床并公网访问

文章目录 1.前言2. CFImagehost网站搭建2.1 CFImagehost下载和安装2.2 CFImagehost网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 4.公网访问测…

pdf增强插件 Enfocus PitStop Pro 2022 mac中文版功能介绍

Enfocus PitStop Pro mac是一款 Acrobat 插件&#xff0c;主要用于 PDF 预检和编辑。这个软件可以帮助用户检查和修复 PDF 文件中的错误&#xff0c;例如字体问题、颜色设置、图像分辨率等。同时&#xff0c;Enfocus PitStop Pro 还提供了丰富的编辑工具&#xff0c;可以让用户…

响应式工作范文作文学习参考资料网站模板源码

模板信息&#xff1a; 模板编号&#xff1a;29083 模板编码&#xff1a;UTF8 模板分类&#xff1a;博客、文章、资讯、其他 适合行业&#xff1a;工作范文类企业 模板介绍&#xff1a; 本模板自带eyoucms内核&#xff0c;无需再下载eyou系统&#xff0c;原创设计、手工书写DIVC…

docker小技能

文章目录 I 预备知识Docker组成命名空间 (进程隔离)II 常用命令2.1 案例:流水线docker 部署2.2 删除没有使用的镜像2.3 shell 不打印错误输出2.4 阿里云流水线/jenkins忽略shell步骤中的报错https://www.runoob.com/docker/docker-architecture.html I 预备知识 Docker组成…

【vue】0到1的常规vue3项目起步

创建项目并整理目录 npm init vuelatestjsconfig.json配置别名路径 配置别名路径可以在写代码时联想提示路径 {"compilerOptions" : {"baseUrl" : "./","paths" : {"/*":["src/*"]}} }elementPlus引入 1. 安装e…

openGauss学习笔记-122 openGauss 数据库管理-设置密态等值查询-密态支持函数/存储过程

文章目录 openGauss学习笔记-122 openGauss 数据库管理-设置密态等值查询-密态支持函数/存储过程122.1 创建并执行涉及加密列的函数/存储过程 openGauss学习笔记-122 openGauss 数据库管理-设置密态等值查询-密态支持函数/存储过程 密态支持函数/存储过程当前版本只支持sql和P…

【工程实践】Docker使用记录

前言 服务上线经常需要将服务搬到指定的服务器上&#xff0c;经常需要用到docker&#xff0c;记录工作中使用过dcoker指令。 1.写Dockerfile 1.1 全新镜像 FROM nvidia/cuda:11.7.1-devel-ubuntu22.04ENV WORKDIR/data/Qwen-14B-Chat WORKDIR $WORKDIR ADD . $WORKDIR/RUN ap…

【数组方法reduce】reduce细讲以及模拟重写其他数组扩展方法

学习关键语句: Array.reduce Array.prototype.reduce reduce方法 重写 reduce 方法 1. 写在前面 很多同学 ( 指我自己 ) 在学习其他数组扩展方法时都没那么困难 , 但是到了 reduce 方法时就会显得蠢蠢的 , 所以今天就赶紧将这个方法讲个明白 其实所有的数组扩展方法本质上都…

数据结构 顺序表和链表

1.线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串.. 线性表在逻辑上是线性结构&#xff0c;也就说是连续的一条直线…

2023年【汽车驾驶员(高级)】证考试及汽车驾驶员(高级)实操考试视频

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 汽车驾驶员&#xff08;高级&#xff09;证考试考前必练&#xff01;安全生产模拟考试一点通每个月更新汽车驾驶员&#xff08;高级&#xff09;实操考试视频题目及答案&#xff01;多做几遍&#xff0c;其实通过汽车…

【备忘】在Nginx服务器安装SSL证书

您可以在Nginx或Tengine服务器上安装SSL证书&#xff0c;实现通过HTTPS安全访问Web服务器。本文介绍如何为Nginx或Tengine服务器安装SSL证书。 重要 本文以CentOS 8.0 64位操作系统、Nginx 1.14.2为例介绍。不同版本的操作系统或Web服务器&#xff0c;部署操作可能有所差异&a…

2020年12月 Scratch(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

一、单选题(共25题,每题2分,共50分) 第1题 下面哪个区域是“舞台区”? A:A B:B C:C D:D 答案:B 第2题 下面哪段程序可以随机切换三个背景? A: B: C: D:

私域电商:构建商业新模式的必要性

随着互联网的快速发展&#xff0c;传统的电子商务模式已经无法满足企业对于个性化、精准化服务的需求。在这样的背景下&#xff0c;私域电商应运而生&#xff0c;为企业提供了新的商业机会和增长点。本文将探讨私域电商的必要性及其构建商业新模式的影响。 一、私域电商的概念 …

Python 邮件发送(163为例)

代码 import smtplib import socket from email.mime.text import MIMEText from email.header import Headerdef send_mail():# 设置发件人、收件人、主题、内容from_address 18847097110163.comto_address 963268595qq.comsubject test emailbody hahahhahaha# SMTP邮件…

若依框架下载文件

若依下载的逻辑是指定文件存储的路径&#xff0c;在ruoyi-admin模块下的application.yml中配置路径结尾必须要加/或者\结尾。 他使用的是虚拟路径映射&#xff0c;所以文件名必须是配置路径下真实的文件名。 若依采用的是流的方式&#xff0c;前端必须要用bolb的方式去接收&am…

八大技术架构-演进之路

单机架构 1、简介 应用服务和数据库服务共用一台服务器 2、出现原因 出现在互联网早期&#xff0c;访问量比较小&#xff0c;单机足以满足需求 3、架构工作原理 单机架构通过应用&#xff08;划分了多个模块&#xff09;和数据库在单个服务器上协作完成业务运行&#xff0…