基于 PHP 实现的微信小程序 pdf 文件的预览服务

知识点

微信小程序预览pdf文件

问题描述

前段时间文库类微信小程序开发中遇到个问题，就是要在小程序中预览阿里云 OSS 中的 pdf 文件。微信官方给的方案就一个，就是把文档缓存到本地然后用资源管理器打开。

这样写问题很明显，pdf 文件小的话还可以，当 pdf 文件很大的时候，加载速度就会很慢。而且我只是需要预览单纯的前几页而已，也要把所有的文档缓存下来，在文件资源管理器中打开。体验非常不好。

探索过程

方案一：使用小程序的 webview，在网页中实现预览。体验还是可以的，但是遇到的问题是 跨域问题无法解决。

方案二：pdf.js。网上很多方案说是用这个，在服务器上写个静态页面进行预览。这种方案的话，如果 pdf 文件在自己域名的服务器上还可以。但是如果文件在第三方的 oss 中，还是会碰到跨域问题。而且线上小程序会出跳转提示。pdf.js 文档比较难啃，各种兼容性，未知问题无法预知。

方案三：pdf 文件转图片，小程序端只是加载相应的图片。这种方案最完美了，不过比较考研后端开发者。我们的后端嫌麻烦，不给我整，无奈。我只能自己来整了。

实现思路

将要预览的 pdf 文件的链接，跟要预览的页数传递给后端。后端根据传递的参数去解析 pdf 文件，并把需要的那一页返回为图片即可。

服务器需要安装图像处理软件 (ImageMagick) 用于生成图片
php 需要安装 ImageMagick 对应的扩展
服务器需要安装 ghostscript 用于打开并解析 pdf 文件

最终效果

通过参数 p 指定相应的页数以后，左边就能显示出相对应页数的图片了。

实现步骤

下载并编译安装 ImageMagick

wget https://netix.dl.sourceforge.net/project/imagemagick/im7-src/ImageMagick-7.0.7-25.tar.gz

tar -zxvf ImageMagick-7.0.7-25.tar.gz

cd ImageMagick-7.0.7-25

./configure

make && make install
复制代码

五条命令分别对应的操作为：下载 解压 打开目录 配置 编译安装

为 php 安装扩展 imagemagick （我是在宝塔中一键安装的）

还可以进行编译安装，这里就暂且省略咯。

安装 ghostscript

wget https://github.com/ArtifexSoftware/ghostpdl-downloads/releases/download/gs925/ghostscript-9.25.tar.gz

tar zxvf ghostscript-9.25.tar.gz

cd ghostscript-9.25

./configure --prefix=/usr

make && make install
复制代码

五条命令分别对应的操作为：下载 解压 打开目录 配置 编译安装

配置命令到 linux 中

echo "/usr/local/lib" >> /etc/ld.so.conf 

ldconfig
复制代码

php 解析文件代码

<?php
try{
    $url = !empty($_GET['url']) ? $_GET['url'] : die('error');
    $page = isset($_GET['p']) ? $_GET['p']-1 : '0';
    $file_name = 'temp_' . mt_rand(1000,9999) . 'pdf';
    file_put_contents( './'.$file_name,file_get_contents($url));
    $imagePreview = new imagick('./'. $file_name . '['.$page.']');
    $imagePreview->setImageFormat( "jpg" );
    // $imagePreview->setResolution( 900, 900 );
    header( "Content-Type: image/jpeg" );
    echo $imagePreview;
    unlink('./'. $file_name);
}catch(\Exception $e){
    echo '发生错误';
}
复制代码

注意：pdf 文件的路径可以是自己服务器的，也可以自己调整。

源码附件已经打包好上传到百度云了，大家自行下载即可～

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27
百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～

开源地址

码云地址：
http://github.crmeb.net/u/defu

Github 地址：
http://github.crmeb.net/u/defu

开源不易，Star 以表尊重，感兴趣的朋友欢迎 Star，提交 PR，一起维护开源项目，造福更多人！