vue使用pdfjs-dist在电脑上展示PDF文件

最新推荐文章于 2024-10-14 18:37:57 发布
最新推荐文章于 2024-10-14 18:37:57 发布
阅读量2.2k 收藏 6
点赞数 3
文章标签： vue.js pdf 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52941842/article/details/138320702
版权
本文介绍如何在Vue2项目中利用pdfjs-dist 2.0.943版本展示本地PDF文件。首先，安装时需指定版本以避免报错。在预览PDF时，需要将文件转化为虚拟URL，利用iview的upload组件实现。通过pdfjs的getDocument方法获取PDF对象，并转换为图片展示。遇到问题如依赖安装不正确或类型错误，可通过在package.json的script中添加指定版本的安装指令解决。
摘要由CSDN通过智能技术生成

安装

安装的时候一定要带上版本号，这里采用的是2.0.943（因为这个版本对于我目前的项目比较合适可以正常使用，其他版本大概率会报错），当前项目使用的是vue2，vue的版本是2.5.10

npm install pdfjs-dist@2.0.943

查看版本发现这玩意版本非常之多

使用

在使用pdfjs-dist库时，pdf.worker.entry是用来指定pdf.worker.js文件的入口路径的。pdf.worker.js是pdfjs-dist库中用于处理PDF文件的工作线程脚本。通常情况下，pdf.worker.js会被动态加载并运行，用于在后台处理PDF文件的解析和渲染操作，以避免阻塞主线程

import * as pdfjs from 'pdfjs-dist'
pdfjs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')

注意：不用的版本有不同的引入方式，具体测试似乎还是有问题，不同的版本引入路径都不一样，具体可以打开node_modules查看


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  蕉君桑
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
在vue中使用pdfjs-dist把pdf文件转为canvas

				
			

			

				

					vip.khan的博客
				

				

					07-12
					
					2142
					
				

			

		

		

			
				
因为pdf存在分页的情况所以加了个目录，以下就是pdf转为canvas的最终成果





上代码

1、html


<template>
    <div class="pdfEditor">
        <div class="editor-pages" v-loading="loading">
                <div id="container_catalog">   
                    <div ..

			
		

	



                

            
              



	

		

			

				
					
vue3+element plus+minio+pdfjs-dist 实现pdf文件上传回显

				
			

			

				

					m0_50360661的博客
				

				

					10-06
					
					1072
					
				

			

		

		

			
				
vue3+element plus+minio+pdfjs-dist 实现pdf文件上传回显

			
		

	



              


  
              

                


	

		

			

				
					
vue2使用pdfjs-dist批量在页面渲染pdf

				
			

			

				

					记不住代码的前端混子
				

				

					07-07
					
					4006
					
				

			

		

		

			
				
vue2使用pdfjs-dist页面上展示pdf

			
		

	





	

		

			

				
					
vue3.0使用pdfjs-dist查看pdf文件

				
			

			

				

					果酱的博客
				

				

					12-10
					
					5735
					
				

			

		

		

			
				
前情：项目要的急，就简单的能看pdf文件，没有其他功能
我用的pdfjs-dist版本号：2.5.207

下面是代码
封装组件
<template>
  <template v-for="item in pageNum" :key="item">
    <canvas :id="`pdf-canvas-${item}`" class="pdf-page" />
  </template>
</template>

<script>.

			
		

	



		

			
		



	

		

			

				
					
vue3中借助 pdfjs-dist 实现pdf文件展示、文本选中功能及使用过程中部分问题处理

				
			

			

				

					qq_45897239的博客
				

				

					02-06
					
					1万+
					
				

			

		

		

			
				
一、文件预览
1、安装 `pdfjs-dist` ，此处指定版本为 `2.16.105`
2、`html` 结构内容
3、`js` 功能实现：
4、可能出现的问题
(1) 部分字体出现乱码或浏览器控制台出现警告
二、文本选中
1、功能实现
2、可能出现的问题：
(1) 页面文字可选中，但文本不可见
(2) 浏览器控制台报错 `Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dispatch

			
		

	





	

		

			

				
					
pdfjs-dist在vue的使用

				
			

			

				

					qq_42613224的博客
				

				

					08-31
					
					2978
					
				

			

		

		

			
				
背景：iframe展示 pdf 在 IE 浏览器直接下载文件，无法预览展示。
2.创建组件文件
没做翻页，展示全部页下滑展示
然后在对应的地方引入即可，传入对应的 src 路径；

			
		

	





	

		

			

				
					
vue3项目中使用pdfjs-dist踩坑记录

				
			

			

				

					Sherry Tian的博客
				

				

					09-10
					
					2022
					
				

			

		

		

			
				
vue3项目中使用pdfjs-dist过程及踩坑记录

			
		

	





	

		

			

				
					
vue3使用pdfjs-dist

				
			

			

				

					weixin_45847765的博客
				

				

					03-13
					
					4446
					
				

			

		

		

			
				
如果需要使用点击跳页的话，用一个变量控制 页码，然后在canvas上换成变量，每次跳页就+-数字就好，位置可以自己定位到需要位置。当前时间是可以使用的，刚实现过，后续如果不可以用了，可能是安装东西的版本迭代了。重新安装的时候版本不同了。如果不知道在哪，可以点开node_modules找到pdfjs-dist对应去改一下就好。然后 找到对应位置：   // vite.config.ts 文件。版本会引起报各种错，需要注意，实在不行复制错误搜索就好。不分页的话加载过大文件时速度很慢，可以懒加载 ，也可以分页。

			
		

	





	

		

			

				
					
高亮img、pdf重点部分（html2canvas、pdfjs-dist、react-pdf）demo

				
			

			

				

					08-28
				

			

		

		

			
				
PDF.js通过解析PDF文件，将其转换为可操作的HTML5 Canvas元素，从而提供了一种在浏览器中流畅展示PDF文档的方法。它支持多种交互功能，如缩放、滚动和搜索。在本例中，我们可以利用PDF.js来高亮PDF文档中的矩形区域...

			
		

	





	

		

			

				
					
pdfjs-2.16.105-dist.zip 

				
			

			

				

					09-20
				

			

		

		

			
				
这个项目的目标是提供一个与平台无关、浏览器无关的API，使得开发者能够轻松地在网页上显示PDF文件，而无需依赖Adobe Acrobat或其他插件。`pdfjs-2.16.105-dist.zip`是一个包含了PDF.js库最新稳定版本2.16.105的...

			
		

	





	

		

			

				
					
Vue3+pdfjs-dist实现PDF文件展示

					
热门推荐

				
			

			

				

					gurenchang的博客
				

				

					08-23
					
					1万+
					
				

			

		

		

			
				
Vue3+pdfjs-dist实现PDF文件展示

			
		

	





	

		

			

				
					
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

				
			

			

				

					10-18
				

			

		

		

			
				
主要介绍了vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
vue实现在线预览pdf文件和下载（pdf.js）

				
			

			

				

					01-21
				

			

		

		

			
				
最近做项目遇到在线预览和下载pdf文件，试了多种pdf插件，例如jquery.media.js（ie无法直接浏览）
最后选择了pdf.js插件（兼容ie10及以上、谷歌、安卓，苹果）
强烈推荐改插件，以下介绍用法
（1）下载插件
下载路径： pdf.js
（2）将下载构建后的插件放到文件中public（vue/cli 3.0）

（3）在vue文件中直接使用，贴上完整代码


 
  <iframe :src=pSrc width=100% height=100%></iframe>
 

<

			
		

	





	

		

			

				
					
vue2使用pdfjs-dist实现pdf预览（iframe形式，不修改pdfjs原来的ui和控件，dom层可以用display去掉一部分组件）

					
最新发布

				
			

			

				

					Shi_haoliu的博客
				

				

					10-14
					
					848
					
				

			

		

		

			
				
vue2使用pdfjs-dist实现pdf预览
使用本地的pdfjs-dist
用的原生的pdfjs-dist
ui没变，但是应该可以在源码删掉一些工具和组件（在iframe中使用不能拿样式去删组件）

			
		

	





	

		

			

				
					
Vue中使用pdf.js实现在线预览pdf文件流

				
			

			

				

					qq_45585640的博客
				

				

					09-07
					
					8689
					
				

			

		

		

			
				
方法加载pdf文件流。可以将文件流作为Blob对象传递给该方法。此时，pdf文件已经被渲染成了一张图片。以上就是在Vue中使用pdf.js实现在线预览pdf文件流的详细步骤。使用pdf.js的Renderer渲染pdf文件。此时，pdf文件已经加载到了pdf对象中。方法获取pdf页面的视图大小。

			
		

	





	

		

			

				
					
vue 使用pdfjs-dist预览pdf文件

				
			

			

				

					wp456789的博客
				

				

					06-07
					
					2126
					
				

			

		

		

			
				
vue 使用pdfjs-dist预览pdf文件

			
		

	





	

		

			

				
					
vue2 使用pdf.js 实现pdf预览，并可复制文本

				
			

			

				

					fmi110的博客
				

				

					01-16
					
					4704
					
				

			

		

		

			
				
需求：pdf预览，并且可以选中pdf的内容进行复制。

			
		

	





	

		

			

				
					
vue3中使用pdfjs-dist预览pdf，vue.config.js配置pdf文件

				
			

			

				

					vue+iview 动态渲染表格（vue.js结合iview插件）
				

				

					08-20
					
					8032
					
				

			

		

		

			
				
参考博文：

1.pdfjs-dist   https://juejin.cn/post/6995856687106261000

2.vue.config.js配置 https://ask.csdn.net/questions/7425984

遇到问题：

1.vue-pdf在vue3项目中引入时报错，似乎是不支持。所以选择了pdfjs-dist。

2.在引入pdf文件时报错



解决：配置vue.config.js中对pdf文件的支持。


const path = requir...

			
		

	





	

		

			

				
					
vue3 中computed 的用法

				
			

			

				

					03-06
				

			

		

		

			
				
在Vue3中，computed属性仍然是一种计算属性用于据其他响应式数据的值进行计，并返回一个新的值。Vue3中的computed属性与Vue2中的computed属性有一些不同之。

在Vue3中，你可以使用`computed`函数来定义计算属性。它接受一个getter函数作参数，并返回一个响应式的ref。getter函数中可以访问其他响应式数据，并根据需要进行计算。

下面是一个示例展示了Vue3中computed的用法：

```javascript
import computed, ref } from 'vue';

const count = ref(0);

const doubleCount = computed(() => {
  return count * 2;
});

console.log(doubleCount.value); 输出：0

count.value = 2;

console.log(doubleCount.value); // 输出：4
```

在上面的示例中，我们使用`computed`函数创建了一个计算属性`doubleCount`，它的值是`count`的两倍。当`count`的值发生变化时，`doubleCount`会自动更新。



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值