vue 预览 pdf pdf.js 的具体使用

ops/2024/9/23 1:06:38/

1、下载依赖

javascript">npm  install pdfjs-dist@2.2.228

2、在需要用的页面引入

javascript"><script>import * as PDFJS from 'pdfjs-dist';export default{data(){return{}},created(){PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')},mounted(){this.hanle()}}
</script>

3、其它都在methods

javascript">     //pdf 创建画布createPdfContainer(id,className) {var pdfContainer = document.getElementById('pdf-container');var canvasNew =document.createElement('canvas');canvasNew.id = id;canvasNew.className = className;pdfContainer.appendChild(canvasNew);this.loadings = false},// 渲染pdfpdf定宽度renderPDF(pdf,i,id) {pdf.getPage(i).then(function(page) {var scale = 1.67;var viewport = page.getViewport(scale);////  准备用于渲染的 canvas 元素//var canvas = document.getElementById(id);var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;//// 将 PDF 页面渲染到 canvas 上下文中//var renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);});},//创建和pdf页数等同的canvas数createSeriesCanvas(num,template) {const _this = thisvar id = '';for(var j = 1; j <= num; j++){id = template + j;_this.createPdfContainer(id,'pdfClass');}},hanle() {const _this= this_this.loadings = true
//如果pdf加密了 就用下面的objlet obj = {url:_this.dataurl,password:'你的密码'}
//如果pdf没有加密 就路径就好let obj = {url:_this.dataurl}PDFJS.getDocument(obj).then(function(pdf) {//用 promise 获取页面var id = '';var idTemplate = 'cw-pdf-';var pageNum = pdf.numPages;//根据页码创建画布_this.createSeriesCanvas(pageNum,idTemplate);//将pdf渲染到画布上去for (var i = 1; i <= pageNum; i++) {id = idTemplate + i;_this.renderPDF(pdf,i,id);}});},

4、页面

javascript">    <div class="left" ref="content"><div ref="pdfViewer" id="pdf-container" class="pdfView" v-loading="loadings"></div></div>


http://www.ppmy.cn/ops/28664.html

相关文章

使用 Langchain、Langfuse、Nemo-gaurdrails、RAGAs构建 RAG 管道并进行监控和评估

原文地址:build-end-to-end-rag-pipeline-with-monitoring-and-evaluation-using-langchain-azure-ai-search 2024 年 4 月 21 日 介绍 使用现代的LLM框架,如Langchain或llamaindex,可以迅速搭建一个用于 RAG 的管道,通常只需编写大约5-6行代码。然而,若要构建一个适用于生…

postman一直转圈圈,无法启动

解决 地址栏输入%appdata%进入此目录&#xff0c;删除%appdata%目录下的postman文件可以解决问题。

237基于matlab的偏振态仿真

基于matlab的偏振态仿真&#xff0c;不同偏振态下光强计算。本仿真软件可以仿真波片对偏振光的相位调制过程。用户可以通过改变波片的类型&#xff0c;波片长轴与 X 轴的夹角&#xff0c;起偏器透光与 X 轴的夹角&#xff0c;检偏器透光轴与 X 轴的夹角等参数&#xff0c;来观察…

爬虫学习--2.urllib 库

urllib了解 urllib 库 是 Python 内置的 HTTP 请求库。urllib 模块提供的上层接口,使访问 www 和 ftp 上的数据就像访问本地文件一样。 有以下几种模块: urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparser robots.txt 解析模…

VSCODE通过SFTP链接VM进行开发

在vscode插件里面搜索sftp&#xff0c;安装。 安装之后&#xff0c;按ctrlshiftp&#xff0c;找到sftp的config 然后填写刚刚的IP&#xff0c;然后是你的用户名密码 如果是通过密钥链接的话就是这样配置 然后切换到这个sftp的tab里面 然后在你的项目右键&#xff0c;然后选择op…

20240502给NanoPi的NEO core开发板编译移远的4G模块的上网程序quectel-CM

20240502给NanoPi的NEO core开发板编译移远的4G模块的上网程序quectel-CM 2024/5/2 16:29 1、默认编译为AMD64/INTEL的x64架构的可执行文件&#xff1a; rootrootrootroot-ThinkBook-16-G5-IRH:~$ rootrootrootroot-ThinkBook-16-G5-IRH:~$ unzip Quectel_QConnectManager_Lin…

git 的迁移

现象是gitlab经常会挂掉&#xff0c;linux会显示磁盘空间不足&#xff0c;实际上&#xff0c;我们linux某个目录的空间是4T。这个空间应该是足够的。猜测是gitlab的安装目录不对导致的空间不足。 1、查找原因 用rpm 安装gitlab会有自己的目录&#xff0c;很多安装文件会在opt…

目标检测算法YOLOv3简介

YOLOv3由Joseph Redmon等人于2018年提出&#xff0c;论文名为&#xff1a;《YOLOv3: An Incremental Improvement》&#xff0c;论文见&#xff1a;https://arxiv.org/pdf/1804.02767.pdf &#xff0c;项目网页&#xff1a;https://pjreddie.com/darknet/yolo/ 。YOLOv3是对YOL…