当前位置: 首页 > news >正文

react的pdf转图片格式上传到后端

这个东西做的我真的是头昏脑涨

主要需求是,upload上传pdf,pdf转图片格式展示,以图片格式上传到后端

封装了组件代码,父组件直接放就可以了

使用的插件pdfjs-dist,版本是  "pdfjs-dist": "2.5.207",node:14.13.0/18.17.0/16.14.2都可以你们要注意node版本是否跟这个插件版本匹配,因为node太老不支持pdfjs插件,而pdfjs插件至少要2.0左右的才会有文件worker.entry文件,本来我是4.0左右版本因为没有需要的文件,所以降下来的。
import React, { useState, useEffect, useRef } from 'react';
import { Spin, Pagination } from 'antd';
import { Form, UploadProps, Image } from "antd";
import { message, Modal, Upload, Button } from "antd";
import { useDispatch, useSelector } from 'react-redux';
import type RootState from '@/types/rootState';
import { getToken } from "@/utils/login";
import config from "@/utils/config";
import type { RcFile, UploadChangeParam } from "antd/lib/upload";
import type { UploadFile } from "antd/es/upload/interface";
import { Toast } from "antd-mobile";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
import type { PurchaseOrderAction } from "@/pages/purchase/purchaseOrder/model";
var pdfjsLib = require('pdfjs-dist/build/pdf.js');
import 'pdfjs-dist/build/pdf.worker.entry';interface PdfViewerProps {url: string;
}
const formItemLayout = {labelCol: {span: 3,},wrapperCol: {span: 12,},
};
const PdfViewer = () &

相关文章:

react的pdf转图片格式上传到后端

这个东西做的我真的是头昏脑涨 主要需求是,upload上传pdf,pdf转图片格式展示,以图片格式上传到后端 封装了组件代码,父组件直接放就可以了 使用的插件pdfjs-dist,版本是 "pdfjs-dist": "2.5.207",node:14.13.0/18.17.0/16.14.2都可以你们要注意n…...

【STM32 FreeRTOS】任务通知

任务通知简介 任务通知:用来通知任务的,任务控制块中的结构体成员变量ulNotifiedValue(32位)就是这个通知值。 #if( configUSE_TASK_NOTIFICATIONS 1 )volatile uint32_t ulNotifiedValue;volatile uint8_t ucNotifyState;#endi…...

51单片机学习

定时器流水灯 #include <REGX52.H> #include "Timer0.h" #include "Key.h" #include <INTRINS.H> unsigned char KeyNum,LEDMode; void main() { P20xFE; Timer0Init(); while(1) { KeyNumKey(); if(KeyNum)…...

vue项目实现postcss-pxtoremvue大屏适配

1.安装依赖 npm install postcss-pxtorem autoprefixer postcss-loader --save-dev # 或者 yarn add postcss-pxtorem autoprefixer postcss-loader --dev2.配置 PostCSS 在项目根目录下创建一个 .postcssrc.js 文件&#xff0c;并添加以下配置&#xff1a; module.exports …...

如何打造爆款游戏?开发由你操刀,运维交由我托管,合作共赢创造更大成功

Linode提供的云计算服务都有哪里的哪些人在用&#xff0c;又都用来做什么&#xff1f;简而言之&#xff1a;世界各地&#xff01;各行各业&#xff01;&#xff01;丰富多彩&#xff01;&#xff01;&#xff01; 今天我们将关注云计算在游戏行业的应用。在这篇文章里&#xf…...

颈部按摩仪语音播报芯片方案,高品质语音IC,NV080D

想要利用碎片化的时间按摩肩颈&#xff0c;颈部按摩仪是很好的选择。然而&#xff0c;随着科技的不断进步&#xff0c;一些新的技术也开始被应用于颈部按摩仪中&#xff0c;以提升它们的功能和用户体验。 例如&#xff0c;NV080D语音播放芯片在颈部按摩仪上的应用&#xff0c;…...

Opencv模板匹配

使用OpenCV和C来识别彩色图片中的特定物体&#xff0c;如黑桃♠&#xff0c;通常涉及几个步骤&#xff1a;预处理图像、特征提取、对象检测等。下面是一个基本的示例代码&#xff0c;演示如何使用OpenCV的模板匹配方法来识别图片中的黑桃♠。 函数原型 void matchTemplate(Inp…...

JavaScript DOM事件监听器:深入解析与实践应用

引言 在JavaScript中&#xff0c;DOM&#xff08;文档对象模型&#xff09;事件监听器是与用户交互的核心机制之一。它们允许开发者响应用户的行为&#xff0c;如点击、滚动、输入等&#xff0c;从而创建动态和交互式的网页。本文将深入探讨DOM事件监听器的工作原理、类型以及…...

iOS的App启动详细过程(底层知识)

1.虚拟内存 & ASLR 在早期计算机中数据是直接通过物理地址访问的&#xff0c;这就造成了下面两个问题 1.内存不够用 2.数据安全问题 内存不够 ---> 虚拟内存 虚拟内存就是通过创建一张物理地址和虚拟地址的映射表来管理内存&#xff0c;提高了CPU利用率&#xff0c;…...

【轨物推荐】创新者的钥匙:如何破解创新的最大难题

原创 混沌学园 混沌学园 2021年12月27日 19:55 本文重点在于&#xff0c;将纷繁复杂现象中&#xff0c;针对创新的灵魂问题“不创新是等死&#xff0c;创新是找死”&#xff0c;给出本质上的解读、解析和解答。将创新在保守和发散的两难选择中&#xff0c;下探本质找到那个价值…...

SpringCloud的能源管理系统-能源管理平台源码

介绍 基于SpringCloud的能源管理系统-能源管理平台源码-能源在线监测平台-双碳平台源码-SpringCloud全家桶-能管管理系统源码 软件架构...

Mybatis获取主键自增的方法

原本的方法 使用原本的JDBC去获取主键自增的方法如下图所示&#xff1a; 在这段代码中&#xff0c;通过连接对象 conn 的 prepareStatement 方法创建了一个PreparedStatement对象&#xff0c;并将SQL语句和 RETURN_GENERATED_KEYS 常量作为参数传递给该方法。这意味着执行SQL…...

strip 、objdump、objcopy 差异与区别

strip 、objdump、objcopy 差异与区别 strip 命令用于从已编译的可执行文件或目标文件中移除调试信息和其他非必要数据。这可以减小文件的大小&#xff0c;并且有助于保护源代码不被轻易反编译。通常&#xff0c;在发布软件时会使用 strip 命令来减少二进制文件的体积 objdump…...

本地phpstudy部署算命系统,用户端是H5页面,支持微信支付宝支付,支持微信支付宝登录

算命系统本地部署教程 0. 技术架构1. 启动Apache、MySQL服务2. 创建前台和后台两个网站3. Navicat连接数据库4. 登录后台是长这个样子5. 登录前台登录样子6. 代码结构是 0. 技术架构 前端&#xff1a;HTMLCSSJquery 后端&#xff1a;PHP 数据库&#xff1a;MySQL 1. 启动Ap…...

APP上架苹果App Store被拒原因及解决方案

苹果官方商店的审核大致分为三部分&#xff1a;预审、机审和人工审核&#xff0c;审核流程包括&#xff1a;初步提交、审核队列、审核过程、结果通知等步骤。#iOS App Store审核是非常严格的&#xff0c;很多很多APP&#xff0c;并不是能够一次上架成功&#xff0c;大部分APP都…...

docker-compose的下载

方式一&#xff1a;使用二进制文件安装。 GitHub官方下载安装&#xff08;推荐&#xff0c;速度慢但不会出错&#xff09; 1.GitHub官方下载&#xff08;测试&#xff0c;已成功&#xff09; curl -SL https://github.com/docker/compose/releases/download/v2.29.1/docker-c…...

h3c虚拟园区网概述

虚拟园区网概述 H3C虚拟园区网的解决方案 企业园区网作为企业网络的核心部分&#xff0c;连接了企业总部的办公、生产、研发、财务等多种重要的机 构。在网络建设中占有重要的地位。园区网内部终端种类众多,接入用户数量庞大,对网络的性能、可 靠性、可管理性都有较高的要求…...

云原生和安装Ubuntu 22系统

一.云原生简介 2004年开始&#xff0c;Google已在内部大规模地使用容器技术。 2008年&#xff0c;Google将 Cgroups合并进入了Linux内核。2013年&#xff0c;Docker项目正式发布。2014年&#xff0c;Kubernetes项目正式发布。2015年&#xff0c;由Google、Redhat 以及微软等大…...

HTTP代理IP如何助力旅游大数据领域?怎么建立安全的代理隧道连接?

在旅游行业&#xff0c;数据的准确性和实时性至关重要。随着大数据分析的兴起&#xff0c;HTTP代理IP成为了这一领域中不可或缺的工具。本文将探讨HTTP代理IP如何帮助旅游大数据领域&#xff0c;并介绍如何建立安全的代理隧道连接。 1. HTTP代理IP在旅游大数据领域的应用 1.1…...

AIGC从入门到实战:基础理论【核心算法与模型】

历史导读&#xff1a; 三、AIGC从入门到实战:基础理论【模型微调】 二、AIGC从入门到实战:AIGC基础理论 一、AIGC从入门到实战&#xff1a;为什么要了解AIGC 核心算法与模型 在人工智能生成内容(AIGC)领域&#xff0c;技术的飞速进步催生了一系列高效且创新的生成模型&…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...