Vue2.0 通过vue-pdf-signature@4.2.7和pdfjs-dist@2.5.207实现PDF预览

news2024/11/25 16:23:46

1.安装依赖

npm install pdfjs-dist@2.5.207 --save
npm install vue-pdf-signature@4.2.7 --save

2.在.vue文件中 script 部分引入

<script>
import * as PDFJS from 'pdfjs-dist'
PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.js');//解决pdf.js中文乱码问题
import pdf from 'vue-pdf-signature'
// 中文PDF加载空白引入依赖
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory'

export default {
 components: {pdf},
 data(){
	return{
	 		pdfPages: 0,//pdf页数
            pdfDoc: null,//pdf对象
		}
	},
	mounted() {
        this.getFileData();
    },
	methods:{
		//获取后台返回的文件流
		 getFileData() {
            this.$http.post("/doc/docarchivemanagereceive/preview", {
                ...this.from,
            }, {
                responseType: 'blob',
            }).then(({data: res}) => {
                 //pdf-main 滚动条回到顶部
                        this.$nextTick(() => {
                            document.getElementsByClassName('pdf-main')[0].scrollTop = 0
                        })

                        const blob = new Blob([res], {type: 'application/pdf'})
                        let fileUrl = URL.createObjectURL(blob)
                        this.loadFile(fileUrl)
            })
        },
         //加载pdf文件
        loadFile(url) {
            const loadingTask = pdf.createLoadingTask({
                url: url,
                cMapPacked: true,
                CMapReaderFactory
            });
            loadingTask.promise.then((pdf) => {
                this.pdfDoc = pdf;
                this.pdfPages = pdf.numPages;

              
                this.$nextTick(() => {
                    for (let i = 0; i < this.pdfPages; i++) {
                        this.renderPage(i + 1, i) // 从第一页开始渲染
                    }
                })
            }).catch((err) => {
                console.error("pdf 加载失败", err);
                this.$message.error("PDF文件打开失败");
               
            });
        },
        //获取分辨率
        getDeviceDPI() {
            var dpi = 96; // 默认值 96dpi

            if (window.screen && window.screen.deviceXDPI && window.screen.logicalXDPI) {
                dpi = window.screen.deviceXDPI / window.screen.logicalXDPI * dpi;
            } else if (window.devicePixelRatio) {
                dpi = dpi * window.devicePixelRatio;
            }

            return dpi;
        },
        //渲染pdf页
        renderPage(num, index, scale = 1.5, rotation = 0) {
            let deviceDPI = this.getDeviceDPI();
            this.pdfDoc.getPage(num).then((page) => {
                var viewport = page.getViewport({
                    scale: scale,
                    rotation: page.getViewport({scale: scale}).rotation + rotation
                });
                // Support HiDPI-screens.
                var outputScale = window.devicePixelRatio || 1;

                var canvas = document.getElementById('pdfCanvas' + index);
                var context = canvas.getContext('2d');

                canvas.width = Math.floor(viewport.width * outputScale);
                canvas.height = Math.floor(viewport.height * outputScale);
                canvas.style.width = Math.floor(viewport.width) + "px";
                canvas.style.height = Math.floor(viewport.height) + "px";

                canvas.parentNode.style.width = canvas.width + 'px';
                canvas.parentNode.style.height = canvas.height + 'px';

                var transform = outputScale !== 1
                    ? [outputScale, 0, 0, outputScale, 0, 0]
                    : null;

                var renderContext = {
                    canvasContext: context,
                    transform: transform,
                    viewport: viewport
                };
                page.render(renderContext);


            })
            //pdfjs-dist 2.0.945版本getViewport(scale)的传参方式
            /* this.pdfDoc.getPage(num).then((page) => {
                 var scale = 816 / page.getViewport(1).width * (window.devicePixelRatio || 1);
                 var scaledViewport = page.getViewport(scale);
                 var canvas = document.getElementById('pdfCanvas' + index);
                 var context = canvas.getContext('2d');
                 canvas.width = scaledViewport.width;
                 canvas.height = scaledViewport.height;
                 var renderContext = {
                     canvasContext: context,
                     viewport: scaledViewport
                 };
                 page.render(renderContext);

             })*/

        },
        
	}
	
}





</script>

3.在.vue文件中 html 部分引入

<!--pdf文件预览-->
 <div class="pdf_view" >
      <div class="pdf-main">       
  		<div class="pdf_item" v-for="(item,index) in pdfPages" :key="index">
             <canvas :id="'pdfCanvas' + index"/>
        </div>
     </div>
 </div>

4.在.vue文件中 css 部分引入


.pdf_view {
    height: calc(100vh - 116px);
    overflow: hidden;
    background: #F2F4F7;

}

.pdf-main {
    width: 100%;
    height: calc(100vh - 116px);
    overflow: auto;
    padding: 20px 0 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .pdf_item {
        position: relative;
        margin: 0 auto 20px;
    }
}

5.最终效果

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

A4-C四驱高防变电站巡检机器人

在电力行业数字化、智能化转型进程中&#xff0c;搭载多模态成像传感器的变电站巡检机器人、视频监控设备逐渐取代传统人工&#xff0c;成为变电设备状态监测的主要工具。变电站巡检机器人具有全天候、非接触式、多参量测量等特点&#xff0c;结合内置人工智能算法完成仪表识别…

““ 引用类型应用举例

#include <iostream> //使能cin(),cout(); #include <stdlib.h> //使能exit(); #include <iomanip> //使能setbase(),setfill(),setw(),setprecision(),setiosflags()和resetiosflags(); //setbase( char x )是设置输出数字的基数,如输出进制数则用se…

Git 本地操作(2)

会以下操作就可以完成本地的版本控制了&#xff0c;就不需要再复制文件每次改一个东西就复制整个工程保存下来啦&#xff01; 建议先看上一篇文章噢 &#xff01;&#xff01;&#xff01; 一、新建项目git本地操作 1、初始化仓库 创建一个 project 文件夹&#xff0c;将需…

室内障碍物射线追踪算法matlab模拟仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 增加发射点 加入室内墙壁&#xff1a; 同时增加发射点和室内墙壁&#xff1a; 2.算法运行软件版本 matlab2022a 3.部分…

视频文案素材获取渠道分享

做视频时为文案发愁&#xff1f;别担心&#xff01;今天为大家推荐几个实用的视频文案素材网站&#xff0c;让你灵感爆棚&#xff0c;轻松创作文案。 蛙学网 首先要推荐的是蛙学网。作为专业短视频素材库&#xff0c;不仅有修牛蹄、解压视频等热门素材&#xff0c;还为短视频创…

【LLaMA-Factory】【Windows】:在windows操作系统配置大模型微调框架LLaMA-Factory

目录 序言 1 代码下载 2 模型下载 一、模型的作用 二、为何需要下拉模型 3 conda 环境安装 一、环境隔离与管理 二、简化安装与配置 三、提升性能与兼容性 4 安装依赖包 5 安装cuda 121版本 6 安装pytorch 一、PyTorch与LLaMA-Factory的兼容性 二、PyTorch的GPU加…

深度学习基础(2024-10-30更新到tensor相关)

1. 名词解释 FFN FFN &#xff1a; Feedforward Neural Network&#xff0c;前馈神经网络馈神经网络是一种基本的神经网络架构&#xff0c;也称为多层感知器&#xff08;Multilayer Perceptron&#xff0c;MLP&#xff09;FFN 一般主要是包括多个全连接层(FC)的网络&#xff…

逆变器前级倍压方案【工作日志】

EG3525S: 价格便宜&#xff0c;能买到&#xff0c;资料丰富&#xff0c;成熟&#xff0c;有人用 C2987456_AC-DC控制器和稳压器_EG3525S_规格书_WJ93166.PDF 发现一个好玩的&#xff0c;这个芯片还可以做大功率的降压控制使用&#xff1a; EG3525S推挽半桥PWM控制芯片数…

企业数字化转型该如何衡量?转型的好不好,主要看哪些方面?

​大家发现一个现象没&#xff1f;就是明明可以简单几句话说清楚的事&#xff0c;有些人就喜欢长篇大论&#xff0c;写个几千上万字&#xff0c;甚至从概念、定义开始聊&#xff0c;讲了半天都还没讲到重点。就给人一种强行“凑字”的感觉... 其实这个问题很简单的&#xff0c;…

html生成图片方案总结

动态图片生成是我们日常开发中经常遇到的需求&#xff0c;比如宣传海报生成&#xff0c;电商商品图动态生成等&#xff0c;本文总结出三种常见的 HTML 生成图片的方案。 一、html2canvas html2canvas库能够将 HTML 元素渲染为 Canvas&#xff0c;然后将其转换为图片。它的优点…

瑞芯微RK3566/RK3568 Android11下该如何默认屏蔽导航栏/状态栏?看这篇文章就懂了

本文介绍瑞芯微RK3566/RK3568在Android11系统下&#xff0c;默认屏蔽导航栏/状态栏方法&#xff0c;使用触觉智能Purple Pi OH鸿蒙开发板演示&#xff0c;搭载了瑞芯微RK3566芯片&#xff0c;类树莓派设计&#xff0c;Laval官方社区主荐&#xff0c;已适配全新OpenHarmony5.0 R…

#渗透测试#SRC漏洞挖掘# 信息收集-Shodan之网页版

Shodan网页版概述 Shodan是一个专门用于搜索互联网上各种设备和服务的搜索引擎&#xff0c;它能够发现并列出暴露在互联网上的设备&#xff0c;如服务器、路由器、交换机、网络摄像头等。与传统的搜索引擎不同&#xff0c;Shodan并不为网页内容建立索引&#xff0c;而是寻找开放…

第二十一章 Vue组件通信之prop校验及单向数据流

目录 一、什么是Prop 1.1. Prop传递数据代码示例图 1.2. 演示代码App.vue 1.3. 演示代码UserInfo.vue 二、props 校验 2.1. props校验简单写法 2.1.1. 演示代码App.vue 2.1.2. 演示代码BaseProgress.vue 2.2. props校验完整写法 2.2.1. 演示代码BaseProgress.vue 2.…

哈工大《理论力学》第九版课后答案解析及笔记PDF

第九版序 哈工大《理论力学》初版于1961年&#xff0c;先后再版8次&#xff0c;曾获得首届国家优秀教材奖和国家级教学成果奖。本书第8版为“十二五”普通高等教育本科国家级规划教材&#xff0c;并于2021年被国家教材委员会评为首届全国教材建设奖全国优秀教材一等奖。 本书…

CloudSat数据产品数据下载与处理 (matlab)

CloudSat数据下载 这个数据我之前和CALIPSO弄混了&#xff0c;后来发现它们虽然是同一个火箭上去&#xff0c;但是数据产品却在不同的平台下&#xff0c;CloudSat的数据更加关注云的特性&#xff0c;包括云覆盖、云水当量、云分类数据。 数据网址在&#xff1a;CloudSat网址 …

Linux初阶——线程(Part2):互斥同步问题

一、互斥锁 1、CPU 运算过程 执行完整个语句后&#xff0c;才会把数据写入内存&#xff1b;如果执行时被中断&#xff0c;那么数据和上下文就会保存到线程的 TCB&#xff0c;但数据并不会被写入内存。 1.1. 当 CPU 执行完整个语句时 CPU 最终执行完整个语句的过程 就用上图举…

Linux学习_10

第九章Linux文件系统权限 主要包括&#xff1a;文件的一般权限&#xff0c;特殊权限&#xff0c;ACL权限&#xff0c;权限掩码umask 文件的一般权限 文件详细信息 文件权限构成 权限针对三类对象定义 owner&#xff1a;所有者&#xff0c;缩写u group &#xff1a;所属组&#…

Easysearch 与 LLM 融合打造知识库系统

文章目录 一、LangChain 简介二、RAG 产生的背景及其局限性三、RAG 工作流程四、 Easysearch 结合 LLM 实现 RAG&#xff08;1&#xff09;Easysearch 简介&#xff08;2&#xff09;结合实现RAG 五、 Easysearch 结合 LLM 实现 RAG 的优势&#xff08;1&#xff09;提高检索准…

【SSM详细教程】-16-SSM整合超详细讲解

精品专题&#xff1a; 01.《C语言从不挂科到高绩点》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482 02. 《SpringBoot详细教程》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12789841.html?spm1001.20…

一个图像处理的实验设计

在Rafael Gonzalez和Richard Woods的《数字图像处理》中有一道这样的实验设计题&#xff0c;我发现特别适合说明多个阈值的全局阈值分割的示例。 我嫌他说话啰嗦&#xff0c;修改了一下作为考试题。 基本流程 图像分割 选取中间灰度级的区域标记。 2. 形态学后处理 开运…