如何基于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文件预览内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

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

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

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

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

  • 如何基于PHP实现微信小程序pdf文件的预览功能

    目录 知识点 问题描述 探索过程 实现思路 最终效果 实现步骤 总结 知识点 微信小程序预览pdf文件 这都是一些实际项目的开发经验,不是东拼西凑的网上水文.如果这篇文章帮到了你,麻烦动动你发财的小手给点个赞,留下个评论. 问题描述 前段时间文库类微信小程序开发中遇到个问题,就是要在小程序中预览阿里云OSS中的pdf文件.微信官方给的方案就一个,就是把文档缓存到本地然后用资源管理器打开. 这样写问题很明显,pdf文件小的话还可以,当pdf文件很大的时候,加载速度就会很慢.而且我只是需要预览单纯的

  • 微信小程序实现图片放大预览功能

    需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码: <!--图片描述--> <view wx:if="{{item.pictures}}" class="list-dImg"> <image bindtap="imgYu" data-list="{{item

  • 如何基于uni-app实现微信小程序一键登录与退出登录功能

    目录 起因 总体思路 详细流程 总结 起因 目前正在使用uni-app开发一个微信小程序,开发到登录模块时通过查阅uni-app官方教程.微信小程序官方文档.网上的教程终于是实现了微信小程序的登录模块,现总结分享给大家,共同学习. 总体思路 创建Vuex进行状态管理(可根据实际需求自行选择是否使用) 创建一个登录按钮并添加触发事件 调用官方uni.getUserProfile() 接口获取用户信息 调用官方uni.login() 接口获取临时登录凭证code 调用后端的登录接口将code 传过去

  • vue3如何实现PDF文件在线预览功能

    目录 概述 正文 创建 vue3 项目 添加 PDF 预览插件 总结 概述 之前我们用 Reactjs + React-PDF 实现了 React 版的 PDF 文件预览,今天我们用 Vue3 + Vue-PDF 实现 Vue 版本的 PDF 文件在线预览功能. 我们先来看看完成后效果 正文 创建 vue3 项目 我们先创建一个的 Vue3 项目, 在终端中输入命令 pnpm create vite vue-pdf-preview 选择 vue-ts 回车,cd 进入项目根目录,执行 pnpm

  • Vue3 + Vue-PDF 实现PDF 文件在线预览实战

    目录 概述 项目实战 创建 vue3 项目 添加 PDF 预览插件 概述 今天我们用 Vue3 + Vue-PDF 实现 Vue 版本的 PDF 文件在线预览功能. 我们先来看看完成后效果: 项目实战 创建 vue3 项目 我们先创建一个的 Vue3 项目, 在终端中输入命令 pnpm create vite vue-pdf-preview 选择 vue-ts 回车,cd 进入项目根目录,执行 pnpm install, 等待项目依赖包安装完成. 项目依赖包安装完成后,我们来启动项目, 执行命令

  • 基于mpvue搭建微信小程序项目框架的教程详解

    简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发 前言: 本文讲述如何搭建完整的小程序项目框架,因为是第一次使用,有不完善的地方请大佬指正. 搭建内容包括: 1.使用scss语法:依赖插件sass-loader .node-sass 2.像vue一样使用路由:依赖插件 mpvue-entry 和 mpvue-router-patch 3.使用

  • 基于vue开发微信小程序mpvue-docs跳转页面功能

    打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 基于PHP实现微信小程序客服消息功能

    项目说明: 本项目是一个简单微信小程序客服消息类,实现客服消息相关功能.官方给的php示例有误,这里就不再吐槽了. 本示例是采用开发者服务器,没有采用云调用的形式. 官方文档: 客服消息指南 客服消息服务端 适用场景 客户消息流程图 使用步骤 1.开启客服消息 https://mp.weixin.qq.com/wxam... 登录-开发-开发设置-消息推送 []( https://raw.githubusercontent... 点击"启动" []( https://raw.githu

  • 基于Vue实现微信小程序的图文编辑器

    由于微信小程序不能使用常规的图文编辑器(比如百度的UEditor )编辑新闻内容之类的,所以用vue写了个针对小程序用的图文编辑器.效果如下 多图上传图片用到了  ajaxfileupload.js (不知道哪位仁兄写的,拿来用了,很好用) 最终形成一串Json数据(转成字符串,传入后台存入数据库,小程序端用JSON.parse 转成JSON ,按照后台一样的方式渲染即可[小程序端代码还没写,后面再贴出来吧]) json格式如 [{"mytype":1,"content&qu

  • 微信小程序之发送短信倒计时功能

    点击后 代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo

随机推荐