移动端使用PDF.js预览pdf文件 教程

需求:

在预览这个pdf文件时候,PC端可以直接 放地址, 在手机端直接放会变成下载,所以就要使用 PDF.js 来实现预览pdf文件。

 

背景:

文件地址: http://www.alioss.test.com/files/laofan.pdf

我的项目域名: http://www.test.com

 

一、PDF.js 下载

官网地址: http://mozilla.github.io/pdf.js/

 

下载稳定版本:pdf.js稳定版本

 

二、PDF.js 使用教程

1、pdf.js目录结构如下。

你要先访问 web目录里的 viewer.html

pdf.js目录结构

 

2、把文件放到你得项目静态文件里。

那么,你访问 www.test.com/web/viewer.html , 如下图:pdf.js viewer.html

 

3、项目中配置使用。

nginx 配置反向代理,此时就代表 /alioss/ 在项目中就代替了 http://www.alioss.test.com

    #代理第三方文件访问
    location /alioss/ {
      proxy_pass http://www.alioss.test.com/;
    }

 

4、php文件接收访问的文件 ,格式为:

http://www.test.com/file_view?file_url=http://www.alioss.test.com/files/laofan.pdf

 /**
     *预览
     * 依然范儿特西
     */
    public function file_view(Request $request)
    {
        
        $file_url = input("file_url");
        $parts = parse_url($file_url);
        //此处的  /alioss/ 代表 nginx反向代理的名字替换,$parts 里边有了 / , 所以此处写 /alioss
        $fally_path_url = '/alioss'.$parts['path'];
        $this->assign("file_url",$fally_path_url);
        return $this->fetch('webview/file_view');
   }

 

5、简单使用就用这个就可以。

<iframe  src="__CPLUGINS__/pdfjs-2.4.456/web/viewer.html?file={$file_url}"   frameborder="0" style="width: 100vw; height:100vh;"></iframe>

 

html 完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>文件预览</title>
</head>

<body style="margin: 0;">
    <iframe id="xy" src="__CPLUGINS__/pdfjs-2.4.456/web/viewer.html?file={$file_url}"   frameborder="0" style="width: 100vw; height:100vh;"></iframe>
</body>
    <script type="text/javascript" src="__MJS__/jquery-2.1.0.js" ></script>
    <script type="text/javascript">
        $('#xy').load(function(){
            $('#xy').contents().find('body').find('#secondaryToolbarToggle').hide();
            $('#xy').contents().find('body').find('#viewFind').hide();
            $('#xy').contents().find('body').find('#sidebarToggle').hide();
            $('#xy').contents().find('body').find('#toolbarViewerMiddle').css('float','right');
        });
    </script>
</html>

 

PDF.js 过程中出现的问题

 

问题1 : file origin does not match viewer

因为我是本服务器 远程访问 阿里oss 的文件资源, 出现跨域。

解决办法 网上说是 /web/viewer.js 要注释掉判断信息:

 if (origin !== viewerOrigin && protocol !== "blob:") {
       // throw new Error("file origin does not match viewer's");
  }

注释之后,还是报错跨域。

解决办法: nginx代理 模式

 

问题2:页面显示不全,之后头部一点,下边一大片空白

解决办法: 在 iframe 里边 加 行内样式

frameborder="0"  style="width: 100vw; height:100vh;"

 

问题 3 : 整个页面左右晃动

解决办法,body里 加

 style="margin: 0;"
    A+
发布日期:2020年06月09日 20:35:07  所属分类:javascript
最后更新时间:2020-06-09 20:38:51
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
头像
刷流量 刷人气 刷点击 刷收藏 刷APP关键词
刷流量 刷人气 刷点击 刷收藏 刷APP关键词
  • ¥ 1.0元
  • 市场价:9.9元
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
  • ¥ 199.9元
  • 市场价:20000元
SEO顾问 中小型网站 单站最低99.9元 全方位优化
SEO顾问 中小型网站 单站最低99.9元 全方位优化
  • ¥ 99.9元
  • 市场价:5000元
wordpress站群服务 泛解析二级域名 二级目录站群
wordpress站群服务 泛解析二级域名 二级目录站群
  • ¥ 1999.9元
  • 市场价:4800元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: