-
vue中预览本地pdf
2020-11-25 16:46:24最某项目需要做一个申报的页面,需要预览本地的pdf和视频 使用require引入静态文件时,发现视频和图片等的引入都没问题,但是引入pdf就开始报错. 不能使用 require(’@/assets/pdf/xxx.pdf’) 于是将pdf文件放在了...最某项目需要做一个申报的页面,需要预览本地的pdf和视频
使用require引入静态文件时,发现视频和图片等的引入都没问题,但是引入pdf就开始报错.
不能使用 require(’@/assets/pdf/xxx.pdf’)
于是将pdf文件放在了public的文件夹下,直接使用/introduce.pdf,可以正常显示,但是部署中用到了nginx转发,如果使用这种绝对路径会显示成当前的网页,从而不能正常显示pdf,于是想到了直接用部署的地址+文件名,也可以正常显示<template v-if="curSearchKey == 'a'"> <embed src="/introduce.pdf" type="application/pdf" width="100%" height="100%"> </template> <template v-if="curSearchKey == 'b'"> <iframe style="width:100%; height:100%" allowfullscreen :src="require('@/assets/video/2-教学引导视频.mp4')" alt="实验视频"/> </template> <template v-if="curSearchKey == 'c'"> <embed src="http://localhost:8888/shenbao/design.pdf" type="application/pdf" width="100%" height="100%"> </template>
-
一篇文章教你使用 PDF.JS 在线预览 PDF (本地文件,服务器文件)
2020-04-29 16:39:48最近开发项目时有个需求是在线预览 PDF 文件,然后百度了好久选出来一个功能比较强大并且好用的插件 PDF.JS,GitHub 下载地址(不知道最近咋了每次都想唠一会水一会)差点忘了说了,本文主要是讲使用过程中的...前言
最近开发项目时有个需求是在线预览 PDF 文件,然后百度了好久选出来一个功能比较强大并且好用的插件 PDF.JS,GitHub 下载地址(不知道最近咋了每次都想唠一会水一会)差点忘了说了,本文主要是讲使用过程中的常见错误,嗯,次要是讲咋使用
安装
下载版本的话我们下在稳定版本的就可以了,没必要非追求最新版,当然也可以下载最新版本的,用法都一样,下载好了之后就找一个位置解压就可以了,或者直接放入程序里边,我们主要用到里边的 viewer.js 和 viewer.html 文件
打开文件夹,把这两个文件放进程序,一个是 build,一个是 web 文件夹,不过我建议整个文件夹都放进去!到这差不多安装过程就 ok 了,viewer.html 文件里边有默认的 PDF 文件
测试方法window.open(' ../pdf/web/viewer.html')
使用
打开我们刚刚放入程序的文件,打开 web 文件目录,打开 viewer.js 文件找到他默认展示的 PDF 文件的路径改为 value:’’ ( 也可以不修改 ) 大概在 4250 行左右,不同的版本可能行数不一样,以实际名称为准 defaultUrl !!!
我们想要调用这个 JS 来预览 PDF 应该咋办呢???方法跟上方测试方法差不多,只不过多加了一个条件
调用方法:windows.open("/pdf/web/viewer.html?file=file.pdf");
这样些其实有一个问题,就是它只能读取你 web 目录下的文件,如果想要读取你本地文件或者服务器文件咋办呢? 当然是通过流的方式输出咯!
获取本地文件 / 服务器文件(移动端预览)
前端写法:通过点击事件触发预览
previewURL: 项目地址路径
filePath: 要打开的项目
encodeURIComponent:用于 url 特殊字符的转译(比如 : ; / ? : @ & = + $ , # 这些用于分隔 URI 组件的标点符号)// 点击调用预览方法 function xx(filePath){ var previewURL= "127.0.0.1:8080/"; window.open('../pdf/web/viewer.html?file='+encodeURIComponent(previewURL+"/test?url="+filePath)); }
后端写法:拿到文件地址,通过流的方式输出到移动端页面显示
// 通过文件流的方式预览 PDF 文件 @RequestMapping(value = "test") public void pdfStreamHandeler(HttpServletRequest request, HttpServletResponse response, HttpSession session) { // 获取路径 String filePath = request.getParameter("url"); File file = new File(filePath); byte[] data = null; try { // 编辑请求头部信息 // 解决请求头跨域问题(IE兼容性 也可使用该方法) response.setHeader("Access-Control-Allow-Origin", "*"); response.setContentType("application/pdf"); FileInputStream input = new FileInputStream(file); data = new byte[input.available()]; input.read(data); response.getOutputStream().write(data); input.close(); } catch (Exception e) { } }
测试界面
常见问题
1.跨域错误:file origin does not match viewer’s
解决方式:找到 viewer.js 中下方的这段代码注释掉,大概在 1793 行附近,
PS:因为每个人的版本不一样,建议使用搜索
2.找不到文件错误:这个问题原因是因为没有获取到你本地或者服务器文件,也就是 pdf > web 目录里没有这个 pdf ,因为它默认是获取这个目录下的 pdf 文件
解决方式:获取本地文件或者服务器文件路径,通过流的方式输出到页面上
3.文件损坏无法显示问题:出现这个问题一般都是你的 url 没有进行转码就直接请求到浏览器了,然后 url 存在的特殊字符会会让浏览器误认为你这个不是一个完整的链接
解决方式:查看前端访问的路径是否使用 encodeURIComponent 转码番外话题
如何隐藏插件自带的下载和打印功能???打开你的 viewer.html 文件,搜索
<button id="download"
在这个 button 按钮加上一个属性style="visibility:hidden"
就 ok 了,如下图
我浅薄的记忆中好像还有遇到的别的错误,但我想不起来了,就先记录这些内容,到时候想起来再补充!!!欢迎留言指教 -
Springboot + layui + FTP文件上传删除 + HTTP文件下载预览 + pdf.js文件预览(项目实战总结)
2020-06-29 09:03:27我们的需求是将文件上传到另一个文件服务器,不存在本地,然后实现文件的增删查改和预览功能。 小白啊,IO操作什么的基本没弄过,网络学的也不好,就搞这个操作,颇费心力。在网上扒了无数的帖子,最终用了一个多周...文件管理
0、需求及前言
我们的需求是实现文件的增删查改和预览功能。服务器有两台,一个是文件服务器,专门用来存储文件;另一个是用来部署项目的服务器。
小白啊,IO操作什么的基本没弄过,网络学的也不好,就搞这个操作,颇费心力。在网上扒了无数的帖子,换了很多个版本,最终还是实现了。总结下来其实也没有那么那么难,下面把关键的实现过程分享出来。不足之处请多指教。
前端框架:Layui
前端工具:pdf.js
协议:FTP、HTTP
后端:Springboot
需求:把上传、删除/替换按钮和预览下载功能放在数据表格中。文件上传至文件服务器。点击文件名时,对pdf文件进行预览,其他格式文件直接下载。
使用范围:内网用户(外网连接可以在此基础上另外了解)
最终效果:1、前端,上传按钮嵌入数据表格中
这部分我写到了另一个博客,Layui 数据表格嵌套文件上传按钮,根据行数据id上传文件。
2、利用IIS部署FTP文件服务器
在网上找了两个教程,跟我当时设置的流程差不多:
只要在网页上输入ftp://192.168.xxx.xxx:端口,然后输入用户名和密码(如果有的话)可以看到文件列表,就说明部署成功了。
我遇到的问题:
- 配置FTP服务时,登录后无法添加文件。
错误信息:“将文件复制到FTP服务器时发生错误”
解决办法: https://blog.csdn.net/hello_world_qwp/article/details/78717336
3、后台FTP连接和文件操作
在这里走了许多弯路。
网上有许多这种代码,大致是相同的,但是又有细微差别。我创建了一个工具类,便于其他controller调用。先把调试正常的代码放出来。遇到的问题后面会提到。import org.apache.commons.net.ftp.FTPClient; import org.apache.commons.net.ftp.FTPReply; import org.apache.log4j.Logger; import org.springframework.web.multipart.MultipartFile; import java.io.*; import java.net.SocketException; import java.util.Date; /** * @Author 27号白开水 * @Date 2020/6/21 15:54 */ public class FtpUtil { private static Logger logger = Logger.getLogger(FtpUtil.class); //ftp服务器ip地址 private static final String FTP_ADDRESS = "192.168.xxx.xxx"; //端口号 private static final int FTP_PORT = 2333; //用户名 private static final String FTP_USERNAME = "upload"; //密码 private static final String FTP_PASSWORD = "123456"; //本地字符编码 private static String LOCAL_CHARSET = "GBK"; // FTP协议里面,规定文件名编码为iso-8859-1 private static final String SERVER_CHARSET = "ISO-8859-1"; //附件路径,这里没用到 //private static String FTP_BASEPATH = ""; //连接ftp, 获取到FTPClient对象 public static FTPClient getFTPClient(){ FTPClient ftp = new FTPClient(); try { int reply; ftp.connect(FTP_ADDRESS, FTP_PORT);//连接FTP服务器 ftp.login(FTP_USERNAME, FTP_PASSWORD);//登录 ftp.setConnectTimeout(50000);// 设置连接超时时间,5000毫秒 if(!FTPReply.isPositiveCompletion(ftp.getReplyCode())){ logger.info("未连接到FTP,用户名或密码错误"); ftp.disconnect(); return ftp; }else { logger.info("FTP连接成功"); } // 开启服务器对UTF-8的支持,如果服务器支持就用UTF-8编码,否则就使用本地编码(GBK) if (FTPReply.isPositiveCompletion(ftp.sendCommand("OPTS UTF8", "ON"))) { LOCAL_CHARSET = "UTF-8"; } ftp.setControlEncoding(LOCAL_CHARSET);//设置字符集编码方式 } catch (SocketException e) { e.printStackTrace(); logger.info("FTP的IP地址可能错误,请正确配置"); } catch (IOException e) { e.printStackTrace(); logger.info("FTP的端口错误,请正确配置"); } return ftp; } //关闭FTP方法 public static boolean closeFTP(FTPClient ftp){ try { ftp.logout(); } catch (Exception e) { logger.error("FTP关闭失败"); }finally{ if (ftp.isConnected()) { try { ftp.disconnect(); } catch (IOException ioe) { ioe.printStackTrace(); logger.error("FTP关闭失败"); } } } return false; } //上传文件 public static boolean uploadFile(FTPClient ftp, MultipartFile multipartFile, String filePath) throws IOException { //获取上传的文件流 InputStream inputStream = multipartFile.getInputStream(); String fileName = multipartFile.getOriginalFilename(); boolean success = true; try { ftp.enterLocalPassiveMode();//设置被动传输 ftp.setFileType(FTPClient.BINARY_FILE_TYPE);//设置文件传输模式为二进制,可以保证传输的内容不会被改变,ASC容易造成文件损坏 String directory = filePath.substring(0, filePath.lastIndexOf("/") + 1); // 如果远程目录不存在,则递归创建远程服务器目录,这里是用于多层文件夹嵌套新建的情况,如果只有一层,那么只需要 1:跳转目录 2:不存在就新建 if (!directory.equalsIgnoreCase("/") //忽略大小写进行比较 && !ftp.changeWorkingDirectory(new String(filePath.getBytes(LOCAL_CHARSET),SERVER_CHARSET))) { int start = 0; int end = 0; if (directory.startsWith("/")) { start = 1; } else { start = 0; } end = directory.indexOf("/", start);//查询除开头“/”之外的第一个“/”的位置 while (true) { String subDirectory = filePath.substring(start, end); if (!ftp.changeWorkingDirectory(subDirectory)) {//跳转子目录 if (ftp.makeDirectory(new String(subDirectory.getBytes(LOCAL_CHARSET),SERVER_CHARSET))) {//新建子文件夹 ftp.changeWorkingDirectory(subDirectory);//再次尝跳转子目录 } else { System.out.println("创建目录失败"); success = false; return success; } } start = end + 1; end = directory.indexOf("/", start); // 检查所有目录是否创建完毕 if (end <= start) { break; } } } //跳转目标目录 ftp.changeWorkingDirectory(filePath); success = ftp.storeFile(new String(fileName.getBytes(LOCAL_CHARSET),SERVER_CHARSET), inputStream); //存储 if(success){ logger.info("上传成功"); }else{ logger.error("上传失败"); } } catch (IOException e) { e.printStackTrace(); logger.error("上传失败"); } finally { try { inputStream.close(); } catch (IOException e) { e.printStackTrace(); } } return success; } //替换文件(实际是先删除后上传) public static Boolean replaceFile(MultipartFile file, String filePath, String fileName) throws IOException { Boolean success = false; FTPClient ftpClient = getFTPClient(); deleteFile(ftpClient, filePath,fileName); //删除文件 uploadFile(ftpClient, file, filePath); closeFTP(ftpClient); return success; } //删除文件 public static Boolean deleteFile(FTPClient ftpClient, String filePath, String fileName){ boolean flag = false;//转移至目标目录 try { ftpClient.changeWorkingDirectory(new String(filePath.getBytes(LOCAL_CHARSET), SERVER_CHARSET));//跳转目录 flag = ftpClient.deleteFile(new String(fileName.getBytes(LOCAL_CHARSET), SERVER_CHARSET));//删除文件 if (!flag) { throw new Exception("FTP附件删除失败!"); } } catch (IOException e) { e.printStackTrace(); } catch (Exception e) { e.printStackTrace(); } return flag; } }
controller或者service调用就是这样:
//文件路径 String filePath = "/2020/";//路径不包含文件名 //调用自定义的FTP工具类上传文件 FTPClient ftpClient = FtpUtil.getFTPClient(); Boolean success = FtpUtil.uploadFile(ftpClient, multipartFile, filePath);//调用工具类上传 System.out.println(success? "上传成功": "上传失败"); FtpUtil.closeFTP(ftpClient);
我这里
只是简单地用到了连接、上传、删除,还有5 中一个获取文件流,其他操作可以参考以下两位大佬的代码:4、FTP遇到的问题和解决方案
- FtpClient.storeFile返回false
这个问题网上的解决方案一般是因为没有设置服务器被动连接模式,或者是因为中文文件名问题,可以参考这个回答:https://www.cnblogs.com/xiangpiaopiao2011/archive/2012/02/28/2371679.html
但是我没有解决。
我在公司是用笔记本连内网wifi的,可以创建文件夹,但是文件传输就是false。在网上找了半天,很多回答都是更改成被动模式,但我这边不适用。后来同事测试了一下发现他的可以传文件上去???
残念。
后来考虑到操作文件的人(公司内部用)都是用的内网网线,就直接用这个版本的代码没有再改了。 - 文件夹和文件乱码的问题
解决办法:
1、开启服务器对UTF-8的支持,但是有的服务器是不支持UTF-8的,这时就只好用本地GBK的编码。
2、FTP协议规定文件名编码为iso-8859-1,所以上传的文件目录或文件名需要转码。
就是上面带有new String(xxxx.getBytes(LOCAL_CHARSET),SERVER_CHARSET) 的那些。 - 目标目录已创建,但是文件没有传到目录中去,而是传到了根目录上
这仍然是编码的问题导致的。加上那句new String(xxxx.getBytes(LOCAL_CHARSET),SERVER_CHARSET) 就好了。
预览的问题困扰了我很久,因为不知道怎么实现。网上的教程大多是从服务器本地拿文件,少了文件服务器,实现方式跟我这不一样。后来看到pdf.js这个插件,只要获取到文件输入流就可以实现预览。然后在获取文件流上又弯弯绕绕一大圈。中间的心路历程堪称心酸,吃了没文化的苦。
这里我尝试了两个版本,一是FTP+临时文件的版本,二是HTTP版本。方法一在生成临时文件时耗费时间,有些影响用户体验。推荐使用HTTP。(这里因为工期有点紧了,上传那里没有再学习HTTP方法,日后有机会再更新)(用FTP不用临时文件应该也是可行的,不过我没找到合适的方法)。
5、预览PDF文件V1.0:FTP+临时文件
pdf.js的用法很简单,就是下载,然后放到项目静态文件目录中,可以参考这两个文章:
https://blog.csdn.net/semial/article/details/89510312
https://blog.csdn.net/qq_36537546/article/details/105793577
最终的实现过程是这样的:先从FTP获取文件流,在本地生成一个临时文件,然后用pdf.js渲染临时文件。
现在想来,其实关键在于获取临时文件,pdf.js的用处只是渲染的更好看一些。
下面是关键(所有)代码:
js://表头渲染,使点击文件名即可预览 , {field: 'file_name', title: '文件名称', width: 480 , templet: function (d) { if (d.file_name != null && d.file_name != '' && d.file_name != undefined){ return '<a href="javascript:void(0);" style="color: #0B9EB0;size: 15px;" lay-event="detail">'+d.file_name+'</a>'; }else { return '未上传'; } } } //对行操作进行监听,调用pdf.js打开临时文件 window.open("/static/js/mes/fileManagement/web/viewer.html?file=" //前半句是pdf.js的viewer.html的路径 + encodeURIComponent("/allFiles/showDetail?filePath="+filePath)); //后半句是controller的注解路径加传参,filePath是文件服务器路径+文件名。 //然后对URL进行编码,否则会因为出现两个问号而报错
Controller:
@RequestMapping("/showDetail") public void showDetail(String filePath, HttpServletRequest request, HttpServletResponse response) throws IOException { System.out.println("文件查看" + filePath); // 编辑请求头部信息 // 解决请求头跨域问题(IE兼容性 也可使用该方法) response.setHeader("Access-Control-Allow-Origin", "*"); response.setContentType("application/pdf"); FTPClient ftpClient = FtpUtil.getFTPClient(); FileInputStream inputStream = FtpUtil.getStream(ftpClient, filePath); byte[] data = null; data = new byte[inputStream.available()]; inputStream.read(data); response.getOutputStream().write(data); inputStream.close(); FtpUtil.closeFTP(ftpClient); }
FtpUtil工具类:
//获取预览需要的文件流信息 public static FileInputStream getStream(FTPClient ftpClient, String filePath) throws IOException {//filePath是文件夹名加文件名 //在客户端本地生成一个临时文件 File tempFile = new File("E:/","mesTempFile.pdf"); //将预览文件放到临时文件 OutputStream outputStream = new FileOutputStream(tempFile); ftpClient.retrieveFile(new String(filePath.getBytes(LOCAL_CHARSET), SERVER_CHARSET),outputStream); outputStream.close(); //读取临时文件的文件流 FileInputStream fileInputStream = new FileInputStream(tempFile); return fileInputStream; }
6、预览/下载文件V2.0:HTTP
这里参见我的另一篇博客
====================================
发布时间2020.06.29
更新时间2020.08.05====================================
基本内容就是这些。
不足之处,请多指教。 - 配置FTP服务时,登录后无法添加文件。
-
iframe引入本地文件_使用vue-pdf进行pdf预览及打印及滚动显示pdf,本地运行和部署均成功...
2020-11-22 14:48:14之前项目里面需要加个pdf预览功能,然后用vue-pdf比较简单,可参考:Vue PDF文件预览vue-pdf ,但现在又让加上pdf打印功能,发现打印时会出现乱码,这一条其实也做了说明,简单说来就是将依赖的node_modules里面的...之前项目里面需要加个pdf预览功能,然后用vue-pdf比较简单,可参考:Vue PDF文件预览vue-pdf ,但现在又让加上pdf打印功能,发现打印时会出现乱码,这一条其实也做了说明,简单说来就是将依赖的node_modules里面的vue-pdf文件中的pdfjsWrapper.js文件进行修改,这样本地确实能够正常打印。
可是这样本地是能运行了,打包部署也没问题,可是git上代码时是不会上传node_modules文件的,也就是说当别人下载这个项目的代码时别人的依赖模块还是原来的。就想到能不能不用它里面的,把自己改好的也上传到某个路径上,然后运行的时候不用原来的pdfjsWrapper.js,而是用自己项目中src路径下的改好的pdfjsWrapper.js。这时需要参考:如何修改 node_modules 里的文件 。
思想是这个思想,现在就看实际操作:
1.文件预览功能: 这个和 Vue PDF文件预览vue-pdf 基本一样,直接照着这个改吧,就不写了。
2.打印功能:我做的比较简单,直接加个按钮,用的vue-pdf自带的打印方法,这时打印是会有乱码的。
3. 开始改node_modules里面vue-pdf文件夹里面的pdfjsWrapper.js文件,这个文件改哪些还是参照Vue PDF文件预览vue-pdf 里面的
这时候修改了,本地运行就没啥大问题了(说用这个方法可能还会出现空白页的问题,这个我那个因为只有一页,暂时没管,如果多页的,上面那个网址也有别的方法打印,可以看看)
4.把修改好的文件复制到自己项目中,如何修改 node_modules 里的文件 这个里面有类似的说明,我按照这个说下我改的,首先我把这个改好的pdfjsWrapper.js文件复制到src/common下,
注意,因为你把文件pdfjsWrapper.js复制到你自己项目中了,那它里面依赖的路径也需要改了,还好,这里面只import了一个,好改。
原来:
现在pdf文件夹下的pdfjsWrapper.js文件,因为之前的是引入上一层node_modules里面的,但现在又换了位置,改成
我没怎么见过在文件中直接导入/node_modules这种的,担心打包之后会有问题。但还好,打包部署后正常。
改好文件,复制好之后,就开始替换原来的了,找到你的项目中配置路径别名的文件,一般在build文件里找
或者全局搜一搜alias啥的,肯定在啥配置文件里,我的在webpack.base.conf.js。加上一句下面这个,意思就是,当需要引入pdfjsWrapper.js时,用括号里的路径里的文件来替代。
4.这样重新运行和打包都行了。
注意:如果报啥pdf_view找不到啥的,看看是不是有那个vue-pdf的依赖包,我的版本是
滚动显示pdf预览
百度 vue-pdf滚动显示,出来一大堆,比如: vue-pdf 插件 不翻页 滚动效果
可以参考上面的,但有时候会报错,this.pdfSrc.then is not a function
这时候需要加一个promise。使用vue-pdf实现文档在线预览报错(this.pdfSrc.then is not a function)
就可以解决了。
-
vue获取本地pdf_使用vue-pdf进行pdf预览及打印及滚动显示pdf,本地运行和部署均成功...
2020-12-22 10:48:12之前项目里面需要加个pdf预览功能,然后用vue-pdf比较简单,可参考:Vue PDF文件预览vue-pdf ,但现在又让加上pdf打印功能,发现打印时会出现乱码,这一条其实也做了说明,简单说来就是将依赖的node_modules里面的... -
antd 实现pdf 预览_使用vue-pdf进行pdf预览及打印及滚动显示pdf,本地运行和部署均成功...
2020-12-28 13:02:35之前项目里面需要加个pdf预览功能,然后用vue-pdf比较简单,可参考:Vue PDF文件预览vue-pdf ,但现在又让加上pdf打印功能,发现打印时会出现乱码,这一条其实也做了说明,简单说来就是将依赖的node_modules里面的... -
android pdf文件预览实现的几种方式
2015-08-15 12:40:07android pdf预览,目前尝试过两种方式,但是无法实现在线预览,只能先下载到本地之后...缺点:无法同时预览多个pdf文件 项目地址:https://github.com/JoanZapata/android-pdfview 方式二、使用开源的Mupdf 这种控件 -
pdf 在线预览之 vue-pdf插件的使用
2021-02-18 16:40:20vue-pdf vue-pdf的安装封装组件 vue-pdf的安装 支持兼容到 IE11 npm install --save vue-pdf@4.2.0 封装组件 ... @description: pdf文件在线预览--本地开发预览在线文件会出现跨域问题,需要将浏览器配置 -
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2020-12-07 07:38:21目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的... -
vue-video-player实现上传本地视频文件后预览,其中src报错
2020-07-21 02:27:55值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") aspectRatio: '16:9', // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 fluid: true, sources: [{ ... -
telegram-pdf-bot:电报bot,可以做很多与PDF文件有关的事情-源码
2021-02-01 06:28:59在GCP上创建一个新项目,并在该项目中启用数据存储区。 安装并运行gcloud init以使用您的项目gcloud init进行初始化。 操作系统要求 的Ubuntu apt-get install poppler-utils libcairo2 libpango-1.0-0 ... -
vue通过pdf.js实现pdf预览,亲测有效
2020-12-24 16:09:37起初使用的是vue-pdf,本地运行没问题,但由于打包后dist文件夹会多出两个js文件,后面部署也还会有一系列问题,因个人能力放弃使用vue-pdf,最后使用pdf.js实现。 1.下载pdf.js包 链接: ... -
docker部署服务,本地文件路径正常,linux服务器文件路径找不到的小坑
2019-07-19 00:16:46项目中有个预览功能,要求返回给前台base64的图片,但是ftp上只有pdf格式,所以要先将pdf文件在后台转化成jpg放在本地默认的临时文件夹(System.getProperty("java.io.tmpdir"))下,然后通过流读... -
关于PDF Embedder报错:Unexpected server response (204) while retrieving PDF
2020-05-24 22:58:04在网站项目中需要做一个PDF-office在线预览的功能,用到了PDF Embedder与PDF.js来展示文档,下载对应官方文件,期间遇到一个比较坑的问题,就是Chrome等浏览器下面出错,报错如下: Unexpected server response ... -
pdf.js的使用实例
2020-11-02 14:41:18核心部分是pdf.js和pdf.worker.js,一个负责API解析,一个负责核心解析 实现pdf预览主要有两种方式: 1、使用pdfjs已经写好的viewer.html页面。需要将pdfjs代码到服务器上,因为放到本地包有点大 2、将PDF文件渲染... -
pdfjs使用npm_pdf.js的使用实例
2020-12-19 16:02:59最近 vue项目要在移动端实现在线浏览pdf,所以想到用pdf.jspdf.js可以实现在线预览pdf文档,核心部分是...需要将pdfjs代码到服务器上,因为放到本地包有点大2、将PDF文件渲染成Canvas详细说下在vue项目中两种方式的... -
pdf.js的简单使用
2020-03-24 22:33:01写在前面的话:最近又个项目需要用到在手机端中使用pdf.js预览pdf文件,找了点资料,发现pdf.js不支持file协议,所以即使很多人下载了,在本地直接引用也打不开,网上有很多人说放到服务器上,花里胡哨一大堆。... -
PDF.js访问远程服务器报file origin does not match viewer's
2018-10-31 10:44:41下载PDF.js(会附带下载资源) ...在项目中要在线预览PDF,进行以下步骤: 方法1: 新建一个html页面,在页面中使用iframe标签,通过iframe标签嵌套viewer.html,如果是只加载本地文件,在viewer.js修... -
android解密pdf居然也能报错?有没有搞错?
2020-08-02 23:26:12至于pdf预览功能,使用第三方应用打开即可,在《作为一个java后端程序员,我是怎么接手android项目,并完成移动端的pdf处理需求的?》中我列出了处理过程中遇到的问题。 项目不大,主要功能就是这些,因为是传统企业... -
C#开发实例大全(基础卷).软件开发技术联盟(带详细书签) PDF 下载
2018-02-20 01:26:55实例095 在数组中添加一个元素 112 实例096 在数组中添加一个数组 113 实例097 不改变长度删除数组中的元素 115 实例098 删除数组元素后改变其长度 116 4.2 常用数组排序算法 117 实例099 使用选择排序法对一维数组... -
Adobe Dreamweaver CS5中文版经典教程.陈宗斌(带详细书签) PDF
2018-01-30 18:38:01全书是一个有机的整体,它涵盖了Dreamweaver CS5的基础知识、HTML基础、CSS基础、创建页面布局、使用层叠样式表、使用模板、处理文本、处理图像、处理导航、创建交互式页面、使用Flash、处理表单、处理在线数据、... -
《Java开发实战1200例(第I卷)》(李钟尉.陈丹丹).part2 高清完整PDF版
2016-06-13 15:53:27实例014 使当前项目依赖另一个项目 1.3 界面设计器 实例015 安装界面设计器 实例016 设计Windows系统的运行对话框界面 实例017 设计计算器程序界面 实例018 设计关于进销存管理系统的界面 第2章 Java基础应用... -
《Java开发实战1200例(第I卷)》(李钟尉.陈丹丹).part3 高清完整PDF版
2016-06-13 16:11:24实例014 使当前项目依赖另一个项目 1.3 界面设计器 实例015 安装界面设计器 实例016 设计Windows系统的运行对话框界面 实例017 设计计算器程序界面 实例018 设计关于进销存管理系统的界面 第2章 Java基础应用... -
HTML与CSS入门经典(第8版)PDF
2016-03-31 14:59:332.2.1 选择一个FTP客户端 10 2.2.2 使用一个FTP客户端 11 2.3 理解Web服务器上放置文件的位置 13 2.3.1 基本文件管理 13 2.3.2 使用一个索引页面 14 2.4 在没有Web服务器情况下分发内容 15 2.4.1 本地... -
从入门到精通HTML5——PDF——网盘链接
2018-02-27 18:13:281.4 编写第一个HTML文件 8 1.4.1 HTML文件的编写方法 8 1.4.2 手工编写页面 9 1.4.3 使用可视化软件制作页面 10 1.4.4 使用浏览器浏览HTML文件 14 1.4.5 使用HTML开发的明日图书网 14 1.5 小结 15 ... -
电脑常见问题与故障1000例(高清PDF中文版)
2011-05-30 07:13:36222.只有一个声道发声 223.两个音箱声音大小不同 224.主机后面的音频接口不正常 225.创新SB Live声卡产生爆音 226.播放MIDI音乐时有杂音 227.超频导致声卡不能正常使用 228.CPU超频导致声卡无声 229.声卡的回放效果... -
C#开发实战1200例(第一卷+第二卷)+源码下载地址.txt
2019-05-17 09:24:24实例095 在数组中添加一个元素 112 实例096 在数组中添加一个数组 113 实例097 不改变长度删除数组中的元素 115 实例098 删除数组元素后改变其长度 116 4.2 常用数组排序算法 117 实例099 使用选择... -
支持配置限制转换后的PDF文件下载 优化maven打包配置,解决 .sh 脚本可能出现换行符问题 将前端所有CDN依赖放到本地,方便没有外网连接的用户使用 首页评论服务由搜狐畅言切换到Gitalk 修复url中包含特殊字符可能会...
-
vue 手机端无法播放动态加载的视频
2018-09-03 13:54:11言归正传,视频文件想跟其他的文件(如ppt,pdf,txt等)一样查看下载,在手机上却实现不了,需要一个播放器,于是放进了video中,预览本地的是没问题的,代码如下: <video width="100%" ... -
23.提供单点登录CAS集成方案,项目中已经提供完善的对接代码 24.低代码能力:表单设计器,支持用户自定义表单布局,支持单表,一对多表单、支持select、radio、checkbox、textarea、date、popup、列表、宏等控件 25....