import React, { useState } from 'react'import { Modal, Spin, Alert } from'antd'import { Document, Page, pdfjs } from'react-pdf'import'react-pdf/dist/esm/Page/AnnotationLayer.css'import'react-pdf/dist/esm/Page/TextLayer.css';//配置 PDF.js 的 worker 文件pdfjs.GlobalWorkerOptions.workerS...
1、下载插件: npm i react-pdf 2、PdfPreview/index.tsx /* 进入该组件时,通过路由传递path进来,形如: history.push({ pathname: '/pdfPreview', query: { path } }) */ import React, { useState } from 'react' import { Spin, Tooltip, Input } from 'antd' import { LeftOutlined, RightOutline...
npm install react-pdf@8.0.2 -S 1、PC端的使用 1.1、封装一个组件:PdfViewModal.tsx 代码语言:javascript 代码运行次数:0 运行 AI代码解释 import React, { useState } from 'react' import { Modal, Spin, Alert } from 'antd' import { Document, Page, pdfjs } from 'react-pdf' import 'react-...
export const base64toBlobPdf = (data) => { // Cut the prefix `data:application/pdf;base64` from the raw base 64 const base64WithoutPrefix = data.indexOf('data:application/pdf;base64,') === -1 ? data : data.substr('data:application/pdf;base64,'.length); const bytes = window.at...
reactHooks+antd+react-pdf封装pdf预览组件 1、下载插件: AI检测代码解析 npm i react-pdf 1. 2、PdfPreview/index.tsx AI检测代码解析 /* 进入该组件时,通过路由传递path进来,形如: history.push({ pathname: '/pdfPreview', query: { path } })...
react+antd使用html2pdf出现的图片导出问题放弃了,换了后端的pdf导出
"dependencies": {"html2canvas":"1.4.1","jspdf":"2.5.1","ahooks":"^2.4.0","antd":"^4.5.4"}, (2)主要流程如下:传进打印模板与模板填充参数 -> ReactDOM渲染模板到真实节点dom -> html2Canvas把节点dom生成图片 -> JsPDF把图片转成pdf -> pdf打印或下载,直接上代码,useHtml2Pdf.js如下: ...
react pdf转图片展示 最近有一个需求,需要在钉钉微应用PC端应用上展示pdf文件,无奈钉钉的的webview不支持embed标签,故为了兼容只能使用图片来展示pdf文件 项目是用react写的,ui为antd,脚手架umi,npm上找了几个pdf转图片的react库,例如react-pdf,浏览器展示没有问题,但是在钉钉上遇到了...
import PDFJS from 'pdfjs-dist'; import styles from './index.scss'; import {isPdfFile} from './../../utils/utils'; import AlloyFinger from 'alloyfinger'; import Transform from 'css3transform'; import {ActivityIndicator} from "antd-mobile"; ...
import { Spin, Tooltip, Input } from 'antd'; import { LeftOutlined, RightOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons'; import { Document, Page, pdfjs } from "react-pdf"; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; import 'react-pdf/dist/esm/Page/Te...