首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

pdf.js预览pdf文件(base64)

1、前言: 新接手一个老项目,需要改造pdf文件的预览效果,接口直接返回的pdf文件文件base64字符串,前端只能拿到base64来进行预览。...pdf.js是一款非常优秀的pdf解析工具,但不支持直接预览文件,这里需要对pdf.js稍微改造。...,放在webapp下面,我把下载以后的文件解压重新命名为pdfjs文件夹,如图  3、保存pdf文件 我这里是一个接口返回包括内容详情,图片,pdf文件等所有内容,点击一条pdf记录,跳转打开新的标签页进行预览...因此把接口返回的pdf文件base64编码先本地缓存.跳转到我们下载的pdf文件夹里面的【viewer.html】文件。...document.location.search.substring(1); if(null == pdfUrl || "" == pdfUrl){ var BASE64_MARKER = ';base64,';//声明文件编码格式

15.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    使用 pdf.js 在网页中加载 pdf 文件

    Mozilla开源了一个插件pdf.js,无需任何本地支持就可以在所有主流的浏览器上显示PDF文档,使用起来十分的方便。唯一的要求就是浏览器必须支持HTML5。...一、pdf.js 简介 官网地址:http://mozilla.github.io/pdf.js/,下载稳定版本,目前最新稳定版为v2.2.228 ? 1、下载至本地: ?...build目录包含以下内容,其中pdf.js是核心文件 ? web目录包含以下内容,其中viewer.html是pdf查看器 ?...3、在VS中打开viewer.html,引用了查看其的样式文件viewer.css、pdf.js核心文件、查看器脚本文件viewer.js 、资源文件local.properties。 ?...该查看器中默认加载的是 pdf.js 的使用说明书内容。 ? 二、将 pdf.js 集成到项目网页中 将解压缩的内容复制到项目中 ? 有多种方式加载加载并查看pdf文件内容。

    42.8K61

    文件文件

    文件文件 1....文件 文件的分类: 根据功能分为:输入流(读取文件) 和 输出(写入文件) 根据操作内容:字符(读取字符数组) 和 字节流(读取字节数组) 字节输入流,字节输出,字符输入流,字符输出...=-1); //文件是必须要关闭的(像水管子一样) is.close(); 利用字节输出实现文件的写入 //利用字节输出实现文件内容的写入(OutputStream 接口的FileOutputStream...(info.getBytes()); //写入完毕后,关闭 os.flush(); //清空缓存区 os.close(); } 利用字节输入流和字节输出实现文件的拷贝 //利用字节输入输入输出...(只能读取字符文件的信息) //使用字符读取文件 public static void testReader() throws Exception{ //创建文件对象 File file =

    2.9K20

    终极解决远程预览pdf问题

    pdf.js一个基于Html的工具类,熟悉pdf.js的朋友们很清楚,pdf.js帮助我们做了很多事。尤其金融类网站会产生很多的报表。需要在线预览。...pdf.js绝对是我们的首选 本地预览 在pdf.js的官网上下载的demo中我们就可以直接进行预览。官网的案列在web文件夹下的view.html。这里我整理了一个pdf.js精简版的。...最终我发小在viewer.html中获取file文件参数的原因是需要通过该文件获取文件文件从而获取数据对viewer.html记性渲染。所以我换了一下思路。...既然是获取文件为什么一开始不直接传递文件。基于这个想法。我开始实现获取远程地址的文件。果然让我找到了方法。我们先通过httpclient爬虫获取远程的文件。...基于这个方法我们只需要在springmvc中在前台请求到后台的时候调用该方法就可以获取文件。在通过response将文件返回到前台。 前台: <iframe src="..

    50510

    【C++】输入输出 ⑨ ( 文件 | 文件输入输出 | 继承结构 | 文件输入输出对象 | 文件打开与关闭 | 创建文件对象同时指定参数打开文件 | 调用文件 open 函数打开文件 )

    文章目录 一、文件输入输出 1、文件输入输出简介 2、继承结构 3、文件输入输出对象 二、文件打开与关闭 1、文件打开 2、创建文件对象同时指定参数打开文件 3、调用文件对象 open 函数打开文件...4、关闭文件 三、Visual Studio 2019 中创建文件 一、文件输入输出 1、文件输入输出简介 文件 IO , 主要定义在 fstream.h 头文件中 , 该头文件中定义了以下三个类...输入 / 输出 相关的继承结构如下图所示 : 3、文件输入输出对象 标准的 输入输出 操作的是 显示器 和 键盘 这两个标准默认设备 , C++ 中预先定义了 cin 输入流对象 接收 键盘输入数据...创建文件输出对象并打开文件 : // 创建 文件输出 对象 // 1....第二种方式 文件输出 // 创建 文件输出 对象 并打开 // 1. 首先 , 创建 文件输出 对象 // 2.

    28310

    组件分享之前端组件——基于pdf.js在线预览PDF文件

    组件分享之前端组件——基于pdf.js在线预览PDF文件 背景 近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组件...组件基本信息 组件:pdf.js 开源协议:Apache-2.0 许可证 使用与下载:https://mozilla.github.io/pdf.js/ 内容 本次分享的组件是用于在浏览器中在线查看...下面是其开源库中的描述内容: PDF.js是使用 HTML5 构建的可移植文档格式 (PDF) 查看器。 PDF.js 由社区驱动并受 Mozilla 支持。...1、创建一个html页面,并在其中增加如下代码 PDF.js '...2、增加如下CSS样式 #the-canvas { border: 1px solid black; direction: ltr; } 3、在js中增加如下代码进行加载需要在线展示的pdf文件

    5.1K20

    使用RESTful 创建文件接收 API

    文件「文本、文档、图片等等」是一个服务器不可缺少的部分,在 使用 Flask 创建 RESTful 服务 介绍了如何使用 Flask 创建一个支持 RESTful API 的服务器。...这篇文章介绍如何使用 RESTful API 来完成文件接收,并将文件保存在静态目录下。...以下是文件接收的代码「这是实现的是图片的接收」: parse = reqparse.RequestParser() parse.add_argument('image', type=werkzeug.datastructures.FileStorage...以上代码实现通过参数传输图片上传至服务端,在服务端以文件的方式读取文件并将文件保存到服务器的静态文件目录下。 以下是通过 Postman 测试文件上传 API 的配置方式。 ?...在 Anddroid 下是使用 Retrofit 来完成文件的上传示例代码如下: public class Server { private static final String TAG = "

    1.9K10

    Go:使用TCP发送和接收文件

    在Go中进行TCP编程时,文件的发送和接收是一个常见的问题,特别是处理大文件时。本文将深入探讨如何在Go中使用TCP发送和接收文件,以及如何有效地处理这类问题。...文件的发送和接收:基础 文件的发送和接收基本上就是读取和写入数据的过程。在Go中,我们可以使用io包中的io.Reader和io.Writer接口来读取和写入数据。...一种常见的方法是在文件数据前面发送一个文件头,这个文件头包含了关于文件的元数据,比如文件名、文件大小等。然后,服务器根据这个文件头来接收文件数据。...服务器根据接收到的文件名创建文件,并使用接收到的文件大小来确定应该读取多少字节的文件内容。 这种方法可以处理多个文件的传输,每个文件的传输都以其文件头开始。...总结: 总的来说,虽然在Go中使用TCP发送和接收文件可能看起来很复杂,但实际上只需要使用io.Copy函数,就可以在不占用大量内存的情况下,有效地发送和接收文件

    1.3K10

    实现一个接收多路RTP,输出一路RTMP的简单MCU

    做转码服务的原型时,看了看MCU的实现,考虑到如果不做转码,可以将多路rtp直接合成为一路rtmp输出,这样就相当于实现了多人连麦,并将多人连麦的视频转发直播了,所以做了这个简单的原型实现!...DEMO只实现了接收一路rtp,输出一路rtmp! 同转码服务的类图设计: 基础库是ZLMediaKit,确实很方便!...然后使用ffmpeg对接收到的端口进行rtp包的推:   ffmpeg -re -i tuiliu_mp4.mp4 -vcodec libx264 -b:v 600k -s 480x320 -profile...main.cpp中启动TCP 3500端口的监听: //启动转码服务 TranscoderTaskManager::getInstance().startTranscoderServer(); 此结构体用来接收命令... + 12), buf->size() - 12, timestamp, timestamp, 0);         //这里就是把收到的rtp流转发给mediamuxer,用于混合成rtmp

    98910

    Java服务器接收上传的文件

    有时候我们服务器需要接收来自用户上传过来的文件,这时候就需要服务器端有相应的服务能够接收这个文件 下面写一个简单的服务器端代码,需要的朋友可以参考一下 注释很全就不多啰嗦了 package com.SM_test.saomiao.constroller...,有些浏览器提交上来的文件名是带有路径的,如: c:\a\b\1.txt,而有些只是单纯的文件名,如:1.txt //处理获取到的上传文件文件名的路径部分,只保留文件名部分...InputStream in = item.getInputStream(); //创建一个文件输出...buffer))>0就表示in里面还有数据 while((len=in.read(buffer))>0){ //使用FileOutputStream输出将缓冲区的数据写入到指定的目录...); } //关闭输入流 in.close(); //关闭输出

    2.3K20

    Django接收照片储存文件的实例代码

    input type="file" name="send"/ <input type="submit" value="Form表单提交"/ </form 下面在看下在Django中接收文件并存储...destination.write(chunk) destination.close() return HttpResponse('ok') 这是一个简单的接收客户端上传的头像文件并保存的例子...,应该看过这个就已经大体会使用接收文件了 但是这里的filename是客户端上传的文件名,也可能是像下面这样的表单 <input type="file" name="filename" / 如果不知道固定上传的文件名...,想要客户端上传什么文件就以其上传的名字命名可以这么写 def get_user_profiles(request): if request.method == 'POST': if request.FILES...总结 到此这篇关于Django接收照片储存文件的实例代码 的文章就介绍到这了,更多相关Django储存文件内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持ZaLou.Cn

    91110

    Postman没有选择文件,但是后端还接收到的文件

    一、原因分析 Postman往后端传输文件,没有选择文件,但是后端还接收到的文件。...但文件名为空,大小为0; 原因: 是因为请求头里多了一行Content-Type:multipart/form-data,Postman向后端指明,我传输的是文件类型的,但是又没有给后端传出文件。...则后端会接接收到一个空文件。 二、请求方式验证 下面按三种请求,去看一下这个的区别。...后端接收代码: @RequestMapping(value = "/file", method = {RequestMethod.POST}) public void addFile(@RequestParam...Postman请求页面: 请求头: 后端打印结果: 传输一个空文件,大小为0,文件名为空 上传方式三:未添加请求头,未选择文件 Postman请求页面: 请求头: 后端打印结果

    25910
    领券