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

终极解决远程预览pdf问题

pdf.js绝对是我们的首选 本地预览pdf.js的官网上下载的demo中我们就可以直接进行预览。官网的案列在web文件夹下的view.html。这里我整理了一个pdf.js精简版的。...远程加载(跨域) 通过上面我们很轻松在实际项目中实现pdf预览。但是这样的预览存在一个问题。我们分布式项目中往往资源服务和业务服务不在同一台服务器上。这个时候我们在对文件进行预览就时跨域操作了。...遇到这个问题我想当然的将上面的a.pdf 换成了我们远程pdf地址了。 首先看看我们的远程文件是否正常 然后再看看我们的代码修改是否正常 所有的就绪后,我很高兴的刷新了demo2的页面并进行了操作。...报错了 报错大概的意思就是文件没找到。为什么没找到是因为我们的文件远程文件pdf.js跨域了。在网上找了很多答案。有的说是在web.xml配置放置跨域的操作。测试无效。...是不是我们可以预览远程的了。其中的好处无疑减轻服务器压力了。

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

hevue-img-preview 仅需传入url的vue图片预览组件

hevue-img-preview 简介 本组件基于 vue 编写,仅传入一个图片地址,即可实现图片预览效果,比较适合给文章及页面的所有图片添加预览效果,预览背景色,关闭按钮颜色,控制条的背景也和字体颜色都可自定义...如果能帮上你,希望可以移步 GitHub https://github.com/heyongsheng 给个小星星 示例预览 在线文档 使用方法 # 安装 npm install hevue-img-preview...给任意对象添加任意事件,例如 即可在事件里调用方法进行预览 methods: { previewImg (url...$hevueImgPreview() 方法可以接收一个字符串类型的 url,或者对象类型的配置,具体使用方法如下 this.$hevueImgPreview('img.png') this....$hevueImgPreview({url: 'img.png'}) 可配置项如下 字段 值 备注 url http://shiliqingshan.com/web/static/img

94130

vue整合pdfjs,实现pdf文件预览

背景 项目上要求实现pdf文件格式的预览。 分析 pdf格式的文件浏览器是可以直接打开的。所以只需要返回pdf文件文件流,就可以直接预览文件,通过这种方式打开,整个页面全是pdf文件内容。...需求是要求预览时,页面上要加上特定的标题格式,所以直接把文件流在浏览器打开的方式行不通。通过收集相关资料,找到pdfjs插件以支持文件预览。...实现 1.vue中引入pdfjs依赖 npm install pdfjs-dist --save 2.使用canvas当预览pdf文件的画布 <canvas v-for="page in pages..._renderPage(num + 1) } }) }, _loadFile (<em>url</em>) { PDFJS.getDocument(<em>url</em>).then((<em>pdf</em>..._renderPage(1) }) }) } 4.使用时传递<em>url</em> this.

11.8K20

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】文件。...最后pdf预览如图(pdf内容打了马赛克): 另外,更改以后的pdfjs文件夹,已经上传到csdn资源,有需要的可以下载,地址如下: https://download.csdn.net/download

14.7K20

office文件 vue 预览_vue实现pdf文档在线预览功能

针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下 一、引入插件 方式一:npm install –save pdfjs-dist,安装完成后在vue项目的...node_modules出现如下依赖 方式二:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除 方式三:将插件直接放在static文件夹下 二、前端页面代码 方式一和方式二...url = ‘/static/pdf/web/compressed.tracemonkey-pldi-09.pdf’ // 跨域请求文件,需要走后台代理,后台需要将文件流返回前端才可在页面显示 //...let url = ‘/pdf/showPdf?...-09.pdf’) // 跨域请求文件,需走后台代理 // let filePath2 = encodeURIComponent(‘/pdf/showPdf?

3.2K10

h5获取pdf文件实现预览

native嵌套 h5实现 pdf 预览 目前实现嵌套预览pdf的有很多种方法各种插件:http://www.open-open.com/news/view/1fc3e18/ 这里我就介绍我要实现的功能...:    我需要native嵌套h5,实现*.pdf预览,而我的pdf,并不是本地的pdf文件,而是通过某服务器下发的http协议的pdf文件    大致分为两种情况,你肯定会说 native为什么还要分为两种情况呢...就目前(2016-03-30)来说,IOS系统兼容性还可以,但是Android就不同了,Android手机是各色各样,我的实现如下: 1、IOS版 window.open(“服务器下发的文件”); //...即可实现 2、Android版 Android就不同了,可通过服务器下发的*.pdf文件先下载到本地,只有这样方才可打开。...H5如何下载文件到本地:http://blog.csdn.net/qq_16559905/article/details/51012763 然后通过native自带的浏览器打开

2.3K20

Spring Boot搭建的一个在线文件预览系统!支持ppt、doc等多种类型文件预览

项目介绍 官方是这样介绍 kkFileView 的: kkFileView 是使用 spring boot 打造文件文档在线预览项目解决方案,支持 doc、docx、ppt、pptx、xls、xlsx、...图片的预览效果 Word 文档的预览 kkFileView 支持 doc,docx 文档预览。...两种模式的适用场景如下 图片预览 :Word 文件大(加载 PDF 速度比较慢)的情况。 PDF 预览 :内网访问(加载 PDF 速度比较快)的情况。 图片预览模式预览效果如下: ?...通过分析 /onlinePreview 接口我们发现, 后端接收到预览请求之后,会从 URL 和请求中筛选出自己需要的信息比如文件后缀、文件名。...首先要明确的是 excel 类型的预览是通过将 excel 文件转换为 HTML 实现的,其他类型 office 文件预览是通过将文件转换为 PDF 或者是 图片的方式来预览的。 举个例子。

3.8K41

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

组件分享之前端组件——基于pdf.js在线预览PDF文件 背景 近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组件...下面是其开源库中的描述内容: PDF.js是使用 HTML5 构建的可移植文档格式 (PDF) 查看器。 PDF.js 由社区驱动并受 Mozilla 支持。...文件 // 如果提供了来自远程服务器的绝对URL,则在该服务器上配置CORS头。...var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf...var loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then(function(pdf) { console.log(

5K20

前端【vue】实现文档在线预览功能,在线预览pdf、word、xls、ppt等office文件

前端实现文档在线预览功能 最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览,..._xdoc=http://view.xdocin.com/doc/CreateReport.docx"> 当然还有别的方法比如: 一、通过a标签href属性实现 pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面...在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 二、通过jquery插件jquery.media.js实现 这个插件可以实现pdf...url="fileurl"> 3、excel文件 目前excel文件已经有了类似pdf.js那样的解析sheet.js 总结 1、免费纯前端方式实现在线预览word、excel、ppt...最优选择微软在线预览(不可编辑) 2、利用后端将文件转为图片,前端以图片形式预览(可行方案) 3、购买在线预览服务例如百度DOC文档服务、永中、I DOC VIEW等

22K20

PHP远程文件包含(RFI)并绕过远程URL包含限制

前言 本文我们讲如何绕过远程URL包含限制。...在PHP开发环境php.ini配置文里”allow_url_fopen、allow_url_include“均为“off”的情况下,不允许PHP加载远程HTTP或FTP的url进行远程文件包含时。...我们依旧可以使用SMB,来加载执行远程文件。 攻击思路 攻击者在发现目标服务器存在本地文件包含的情况下。可以通过配置SMB服务器,启用匿名浏览访问。...确定PHP不允许远程文件包含 ? 试图从我们kali主机包含文件时,应用程序抛出错误并且没有发生RFI 在kali上配置我们的SMB服务器 创建演示php程序文件 ?...附录 allow_url_fopen和allow_url_include对文件包含的影响 allow_url_fopen #允许url打开远程文件,如果url传入的参数是本地文件的不受此限制 当allow_url_fopen

2.7K30

远程URL文件批量下载打包的方法

,导致fetch时间和打包的时间太久) JS 尝试通过前端请求后端,后端返回文件信息,然后前端异步请求所有文件,最后在前端打包下载 前提 想法很好,并且已经有人这样做了,我们只用考虑按照别人的做法坐下去...使用https://github.com/Stuk/jszip-utils获取远程数据(直接通过AJAX获取,需要转换格式) 直接下载这两个库,然后把dist/下的文件放入到项目,也可以用github...= 0; let progress = 0; // 可通过按钮或者其它事件触发 $.get('/urls', function(res) { // 假设 res.data 是后端返回的一组远程数据对象...// {url: 'x.jpg', filename: 'xx.jpg', path: 'xxxx'} total = res.data.length; if (total...folder 对象 let folderMap = {}; // 遍历所有后端返回的 urls res.data.map(function (data) { // 获取远程资源数据

19510
领券