如何基于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文件的路径可以是自己服务器的,也可以自己调整。

总结

到此这篇关于如何基于PHP实现微信小程序pdf文件预览功能的文章就介绍到这了,更多相关PHP微信小程序pdf文件预览内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-05-27

微信小程序实现打开并下载服务器上面的pdf文件到手机

谈一谈ios的bug: 关于ios系统的bug这块也是快把柚子给逼疯了啊,ios系统是没有文件管理的,柚子用了很多办法,最后终于确定不管用什么办法ios都是实现不了下载的,只能实现在线查看.所以没办法,如果不考虑兼容ios的话,是很简单就能解决的,但是我想没有哪一个小程序会不让你兼容ios的吧! 先看一下不兼容ios系统的下载柚子是怎么实现的吧: 首先我们需要在页面里写入一个按钮,用来触发pdf的打开和下载,写上点击事件 //查看并下载 See_download() { wx.downloadF

微信小程序实现pdf、word等格式文件上传的方法

目前微信只支持从聊天记录里面获取文件 一.前言 目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的path地址,文件名,文件的大小等. 获取这些信息再结合微信的上传接口wx.uploadFile,即可实现文件上传. 二.具体实现 首先需要一个按钮来调用wx.chooseMessageFile. wx.chooseMessageFile({ count: 1, //能选择文件的数量 type: 'file

微信小程序技巧之show内容展示,上传文件编码问题

show内容展示 尝试用微信小程序的template组件实现.同时,尝试页面间转跳时传参,在目标页面引入模板文件实现 写的更少,做的更多 篇幅有限详细代码此处省略 <view class="show-warp"> <block wx:for="{{discuss}}" wx:key="index"> <template is="discuss" data="{{item}}"&

微信小程序实现一张或多张图片上传(云开发)

一.简介: 这篇文章向大家展示的是把图片上传到云数据库中,这是我做商城项目时研究的.大家都知道,云开发是没有后端开发的,所有图片我们要放到云数据库中. 二.素材图: : 三.效果图: 四.代码: wxml: <!--miniprogram/pages/fb/fb.wxml--> <view class='pages'> <view class='top'><text class='top_name'>商品图片:</text></view&g

微信小程序中使元素占满整个屏幕高度实现方法

微信小程序中使元素占满整个屏幕高度实现方法 在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以. 以前我的做法是用js获取屏幕的高度,然后将其赋值给height, 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口,然后通过setData赋值 但是显然通过js来进行的,

微信小程序实现image组件图片自适应宽度比例显示的方法

本文实例讲述了微信小程序实现image组件图片自适应宽度比例显示的方法.分享给大家供大家参考,具体如下: 一. 了解image组件 由于image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了.下面就来一起解决下 二. 方法 (一).使用mode:widthFix widthFix:宽度不变,高度自动变化,保持原图宽高比不变. 首先我们先设置image的mode为widthFix,然后给图片加一个固定rpx的宽度,比如:730rpx. 这样图片也可以自适应了..因为小程序的r

微信小程序实现页面跳转传值以及获取值的方法分析

本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法.分享给大家供大家参考,具体如下: 在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值. my.wxml <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" sr

微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】

本文实例讲述了微信小程序五子棋游戏的棋盘,重置,对弈实现方法.分享给大家供大家参考,具体如下: DEMO下载 五子棋对弈.悔棋DEMO 效果图 分析 1. 采用微信小程序的canvas制作五子棋: 2. 确定棋盘大小及格数: 3. 绘制棋盘--通过棋盘宽高和格数计算间距,同时保存坐标点: 4. 黑方和白方下子--定义一个布尔变量代表各自的身份: 5. 重置棋盘--重新开始: 6. 通过判断当前棋手,悔棋时进行改变. 绘制棋盘 drawLine(arr){ arr.forEach(current

微信小程序自定义组件传值 页面和组件相互传数据操作示例

本文实例讲述了微信小程序自定义组件传值 页面和组件相互传数据操作.分享给大家供大家参考,具体如下: 要想在组件中调到页面中的方法,并且想要组件中传数据到页面去,emmmm,可以酱紫: 用组件事件 triggerEvent! 首先,在页面中定义组件 ,json文件中记得加上: { "usingComponents": { "user-btn": "/pages/component/userInfo/userInfo" } }, 然后,index.w

微信小程序实现元素渐入渐出动画效果封装方法

开端 之前一直使用堪称"万能"的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其"无能为力". 那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了.做到类似jQuery show()的效果 原创文章,允许转载分享.但请转载请一定标明出处,这是起码的尊重 本文章阅读前需要对微信小程序的动画api有所了解 先看效果 可以看到,动画效果十分流畅,高度复用,封装好后只需要三行代码实现动画 解决 1.寻根问底,发现

微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

本文为大家分享了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法,供大家参考,具体内容如下 先看效果是否是自己需要的 实现步骤: 1.整个布局用作为根节点包裹所有view,并动态绑定scroll-view的scroll-y属性 2.样式文件中设置Page的overflow-y属性值为hidden 3.样式文件中设置scroll-view的height属性值为100% 4.打开自定义弹窗的点击事件中,更改isScroll的值为false,关闭弹窗的点击事件中,更改isScroll的值为true J