首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能

获取对应页面的内容 使用 canvas 绘制当前页面 扩展阅读:《顶级开源 react ui 组件库测评推荐》 渲染整个 PDF 并翻页 - React 开发预览组件 想渲染全部页面其实很简单,按照上面的思路,获取到页数...,直接循环渲染就好了 import * as pdf from 'pdfjs-dist' import pdfWorker from 'pdfjs-dist/build/pdf.worker.js?...scrollIntoView({ behavior: 'smooth' }) } 再来实现下滚动位置自动高亮页数 本质上是使用 IntersectionObserver api 来完成,监听每个页面的可见性...但是强大的 pdf.js 支持在相同的位置绘制文字,接下来我们实现它 import * as pdf from 'pdfjs-dist' import pdfWorker from 'pdfjs-dist...url' + import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'; + import 'pdfjs-dist/web/pdf_viewer.css

4.6K20

前端实现word、excel、pdf、ppt、mp4、图片、文本等文件的预览

pptx) pptxjs pptxjs改造开发 excel(xlsx) sheetjs、handsontable exceljs(npm)、handsontable(npm)(npm) pdf(pdf) pdfjs...设置PDFJS.GlobalWorkerOptions.workerSrc的地址 通过PDFJS.getDocument处理pdf数据,返回一个对象pdfDoc 通过pdfDoc.getPage单独获取第...1页的数据 创建一个dom元素,设置元素的画布属性 通过page.render方法,将数据渲染到画布上 import * as PDFJS from "pdfjs-dist/legacy/build/pdf..."; // 设置pdf.worker.js文件的引入地址 PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js...= pdfDoc.numPages; // pdf的总页数 // 获取第1页的数据 pdfDoc.getPage(1).then(page =>{ // 设置canvas相关的属性

1.8K50

分享一些 word、excel、pdf、ppt、图片、文本等文件的预览工具

pptx) pptxjs pptxjs改造开发 excel(xlsx) sheetjs、handsontable exceljs(npm)、handsontable(npm)(npm) pdf(pdf) pdfjs...设置PDFJS.GlobalWorkerOptions.workerSrc的地址 通过PDFJS.getDocument处理pdf数据,返回一个对象pdfDoc 通过pdfDoc.getPage单独获取第...1页的数据 创建一个dom元素,设置元素的画布属性 通过page.render方法,将数据渲染到画布上 import * as PDFJS from "pdfjs-dist/legacy/build/pdf..."; // 设置pdf.worker.js文件的引入地址 PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js...= pdfDoc.numPages; // pdf的总页数 // 获取第1页的数据 pdfDoc.getPage(1).then(page =>{ // 设置canvas相关的属性

1.8K30

pdf.js预览pdf文件流(base64)

mozilla.github.io/pdf.js/ 下载稳定版本,下载后解压,把他放在静态资源目录下面,我这里的项目是老项目,前后端么有分离的java项目,放在webapp下面,我把下载以后的文件解压重新命名为pdfjs...文件夹,如图  3、保存pdf文件流 我这里是一个接口返回包括内容详情,图片,pdf文件等所有内容,点击一条pdf记录,跳转打开新的标签页进行预览。...因此把接口返回的pdf文件流base64编码先本地缓存.跳转到我们下载的pdf文件夹里面的【viewer.html】文件。...function getPdf(fileBase64) { var href = serveUrl + '//pdfjs/web/viewer.html' var sessionStorage.setItem...('pdfBase', fileBase64) window.open(href,'_blank') } 4、对viewer.html文件的处理 打开pdfjs/web下的viewer.html

13.8K20

用微前端 qiankun 接入十几个子应用后,我遇到了这些问题

直接跳转的,因为这个 router 是子应用的路由,所有的跳转都会基于子应用的 base 。...当然了写 链接可以跳转过去,但是会刷新页面,用户体验并不好。 这里可以采用以下两种方式: 将主应用的路由实例通过 props 传给子应用,子应用用这个路由实例跳转。...路由模式为 history 模式时,通过 history.pushState() 方式跳转 这里我把他封装为了一个常用方法 js 复制代码 /** * 微前端子应用路由跳转 * @param {String.../pdfjsWrapper.js').default; var PDFJS = require('pdfjs-dist/es5/build/pdf.js'); if ( typeof window...pdfjs-dist/es5/build/pdf.worker.js'); var PdfjsWorker=require('pdfjs-dist/es5/build/pdf.worker.js

1.1K20

php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码

摘要 腾兴网为您分享:PHP页面跳转 Js页面跳转代码,自动刷宝,中信金通,携程抢票,未来屋等软件知识,以及沃金汇,沃行讯通,securecrt.exe,我的世界变形金刚mod,一票通,农场小分队,手电筒...第一部分: JavaScript 跳转 方法一: 复制代码 代码示例: script language=javascript window.location= http://www.jbxue.com;...= “http://www.jbxue.com”; 方法三: (带进度条) 复制代码 代码示例: 跳转到jbxue.com loading… size=46 name=chart> var bar=...复制代码 代码示例: 第三部分: 动态页面跳转 方法一: PHP 跳转 复制代码 代码示例: header(“location: http://www.jbxue.com”); ?...> 方法二: ASP 跳转 复制代码 代码示例: response.redirect “http://www.jbxue.com” %> FYI: Dim ID1 Dim ID2 dim str ID1

29.6K30
领券