精华内容
下载资源
问答
  • 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 文件,然后百度了好久选出来一个功能比较强大并且好用的插件 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 了,如下图
    在这里插入图片描述
    在这里插入图片描述
      我浅薄的记忆中好像还有遇到的别的错误,但我想不起来了,就先记录这些内容,到时候想起来再补充!!!欢迎留言指教

    展开全文
  • 我们的需求是将文件上传到另一个文件服务器,不存在本地,然后实现文件的增删查改和预览功能。 小白啊,IO操作什么的基本没弄过,网络学的也不好,就搞这个操作,颇费心力。在网上扒了无数的帖子,最终用了一个多周...

    0、需求及前言

    我们的需求是实现文件的增删查改和预览功能。服务器有两台,一个是文件服务器,专门用来存储文件;另一个是用来部署项目的服务器。

    小白啊,IO操作什么的基本没弄过,网络学的也不好,就搞这个操作,颇费心力。在网上扒了无数的帖子,换了很多个版本,最终还是实现了。总结下来其实也没有那么那么难,下面把关键的实现过程分享出来。不足之处请多指教。

    前端框架:Layui
    前端工具:pdf.js
    协议:FTP、HTTP
    后端:Springboot
    需求:把上传、删除/替换按钮和预览下载功能放在数据表格中。文件上传至文件服务器。点击文件名时,对pdf文件进行预览,其他格式文件直接下载。
    使用范围:内网用户(外网连接可以在此基础上另外了解)
    最终效果:实现效果

    1、前端,上传按钮嵌入数据表格中

    这部分我写到了另一个博客,Layui 数据表格嵌套文件上传按钮,根据行数据id上传文件

    2、利用IIS部署FTP文件服务器

    在网上找了两个教程,跟我当时设置的流程差不多:

    只要在网页上输入ftp://192.168.xxx.xxx:端口,然后输入用户名和密码(如果有的话)可以看到文件列表,就说明部署成功了。

    我遇到的问题:

    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 中一个获取文件流,其他操作可以参考以下两位大佬的代码:

    1. JAVA FTPClient FTP简单操作
    2. java上传、下载、预览、删除ftp服务器上的文件

    4、FTP遇到的问题和解决方案

    1. FtpClient.storeFile返回false
      这个问题网上的解决方案一般是因为没有设置服务器被动连接模式,或者是因为中文文件名问题,可以参考这个回答:https://www.cnblogs.com/xiangpiaopiao2011/archive/2012/02/28/2371679.html
      但是我没有解决。
      我在公司是用笔记本连内网wifi的,可以创建文件夹,但是文件传输就是false。在网上找了半天,很多回答都是更改成被动模式,但我这边不适用。后来同事测试了一下发现他的可以传文件上去???
      残念。
      后来考虑到操作文件的人(公司内部用)都是用的内网网线,就直接用这个版本的代码没有再改了。
    2. 文件夹和文件乱码的问题
      解决办法:
      1、开启服务器对UTF-8的支持,但是有的服务器是不支持UTF-8的,这时就只好用本地GBK的编码。
      2、FTP协议规定文件名编码为iso-8859-1,所以上传的文件目录或文件名需要转码。
      就是上面带有new String(xxxx.getBytes(LOCAL_CHARSET),SERVER_CHARSET) 的那些。
    3. 目标目录已创建,但是文件没有传到目录中去,而是传到了根目录上
      这仍然是编码的问题导致的。加上那句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

    ====================================

    基本内容就是这些。
    不足之处,请多指教。

    展开全文
  • 之前项目里面需要加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自带的打印方法,这时打印是会有乱码的。

    7bbe9cc5a0d7d7ef4115f40eec2f2df2.png

    3. 开始改node_modules里面vue-pdf文件夹里面的pdfjsWrapper.js文件,这个文件改哪些还是参照Vue PDF文件预览vue-pdf 里面的

    e38bc4d513a6e96d5474e22be16cbfa5.png

    这时候修改了,本地运行就没啥大问题了(说用这个方法可能还会出现空白页的问题,这个我那个因为只有一页,暂时没管,如果多页的,上面那个网址也有别的方法打印,可以看看)

    4.把修改好的文件复制到自己项目中,如何修改 node_modules 里的文件 这个里面有类似的说明,我按照这个说下我改的,首先我把这个改好的pdfjsWrapper.js文件复制到src/common下,

    808980191fda22ad79b7be87bbd1857d.png

    注意,因为你把文件pdfjsWrapper.js复制到你自己项目中了,那它里面依赖的路径也需要改了,还好,这里面只import了一个,好改。

    原来:

    906a921da96aa759c52185834b1cf56c.png

    现在pdf文件夹下的pdfjsWrapper.js文件,因为之前的是引入上一层node_modules里面的,但现在又换了位置,改成

    2d67a528e0fa3046d8a414dabe3cd08c.png

    我没怎么见过在文件中直接导入/node_modules这种的,担心打包之后会有问题。但还好,打包部署后正常。

    改好文件,复制好之后,就开始替换原来的了,找到你的项目中配置路径别名的文件,一般在build文件里找

    4f7fc2ec0b8f9422d130d4ba21fa78d7.png

    或者全局搜一搜alias啥的,肯定在啥配置文件里,我的在webpack.base.conf.js。加上一句下面这个,意思就是,当需要引入pdfjsWrapper.js时,用括号里的路径里的文件来替代。

    af9d798d7a94ac1486cba9122f2f13e0.png

    4.这样重新运行和打包都行了。

    注意:如果报啥pdf_view找不到啥的,看看是不是有那个vue-pdf的依赖包,我的版本是

    23c4de3fa8a058fb640fd15d7c4281d3.png

    滚动显示pdf预览

    百度 vue-pdf滚动显示,出来一大堆,比如: vue-pdf 插件 不翻页 滚动效果

    可以参考上面的,但有时候会报错,this.pdfSrc.then is not a function

    这时候需要加一个promise。使用vue-pdf实现文档在线预览报错(this.pdfSrc.then is not a function)

    816314bcb481fd858b06854711f53a8d.png

    就可以解决了。

    展开全文
  • 之前项目里面需要加pdf预览功能,然后用vue-pdf比较简单,可参考:Vue PDF文件预览vue-pdf ,但现在又让加上pdf打印功能,发现打印时会出现乱码,这条其实也做了说明,简单说来就是将依赖的node_modules里面的...
  • 之前项目里面需要加pdf预览功能,然后用vue-pdf比较简单,可参考:Vue PDF文件预览vue-pdf ,但现在又让加上pdf打印功能,发现打印时会出现乱码,这条其实也做了说明,简单说来就是将依赖的node_modules里面的...
  • android pdf文件预览实现的几种方式

    千次阅读 2015-08-15 12:40:07
    android pdf预览,目前尝试过两种方式,但是无法实现在线预览,只能先下载到本地之后...缺点:无法同时预览个pdf文件 项目地址:https://github.com/JoanZapata/android-pdfview 方式二、使用开源的Mupdf 这种控件
  • vue-pdf vue-pdf的安装封装组件 vue-pdf的安装 支持兼容到 IE11 npm install --save vue-pdf@4.2.0 封装组件 ... @description: pdf文件在线预览--本地开发预览在线文件会出现跨域问题,需要将浏览器配置
  • 目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料,在实现的过程,还是走了比较多的弯路,最后采用了备受推荐的...
  • 值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") aspectRatio: '16:9', // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 fluid: true, sources: [{ ...
  • 在GCP上创建一个新项目,并在该项目中启用数据存储区。 安装并运行gcloud init以使用您的项目gcloud init进行初始化。 操作系统要求 的Ubuntu apt-get install poppler-utils libcairo2 libpango-1.0-0 ...
  • 起初使用的是vue-pdf本地运行没问题,但由于打包后dist文件夹会多出两js文件,后面部署也还会有系列问题,因个人能力放弃使用vue-pdf,最后使用pdf.js实现。 1.下载pdf.js包 链接: ...
  • 项目中个预览功能,要求返回给前台base64的图片,但是ftp上只有pdf格式,所以要先将pdf文件在后台转化成jpg放在本地默认的临时文件夹(System.getProperty("java.io.tmpdir"))下,然后通过流读...
  • 在网站项目中需要做一个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文件渲染...
  • 最近 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修...
  • 至于pdf预览功能,使用第三方应用打开即可,在《作为一个java后端程序员,我是怎么接手android项目,并完成移动端的pdf处理需求的?》我列出了处理过程遇到的问题。 项目不大,主要功能就是这些,因为是传统企业...
  • 实例095 在数组添加一个元素 112 实例096 在数组添加一个数组 113 实例097 不改变长度删除数组的元素 115 实例098 删除数组元素后改变其长度 116 4.2 常用数组排序算法 117 实例099 使用选择排序法对一维数组...
  • 全书是一个有机的整体,它涵盖了Dreamweaver CS5的基础知识、HTML基础、CSS基础、创建页面布局、使用层叠样式表、使用模板、处理文本、处理图像、处理导航、创建交互式页面、使用Flash、处理表单、处理在线数据、...
  • 实例014 使当前项目依赖另一个项目 1.3 界面设计器 实例015 安装界面设计器 实例016 设计Windows系统的运行对话框界面 实例017 设计计算器程序界面 实例018 设计关于进销存管理系统的界面 第2章 Java基础应用...
  • 实例014 使当前项目依赖另一个项目 1.3 界面设计器 实例015 安装界面设计器 实例016 设计Windows系统的运行对话框界面 实例017 设计计算器程序界面 实例018 设计关于进销存管理系统的界面 第2章 Java基础应用...
  • 2.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 本地...
  •  1.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  ...
  • 222.只有一个声道发声 223.两个音箱声音大小不同 224.主机后面的音频接口不正常 225.创新SB Live声卡产生爆音 226.播放MIDI音乐时有杂音 227.超频导致声卡不能正常使用 228.CPU超频导致声卡无声 229.声卡的回放效果...
  •  实例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预览本地的是没问题的,代码如下: &lt;video width="100%" ...
  • 23.提供单点登录CAS集成方案,项目中已经提供完善的对接代码 24.低代码能力:表单设计器,支持用户自定义表单布局,支持单表,对多表单、支持select、radio、checkbox、textarea、date、popup、列表、宏等控件 25....

空空如也

空空如也

1 2 3 4
收藏数 71
精华内容 28
关键字:

一个项目中预览本地pdf文件