ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【微信小程序】实现打开并下载服务器上面的pdf文件到手机 [打印本页]
作者: 勿忘初心做自己    时间: 2024-6-13 21:57
标题: 【微信小程序】实现打开并下载服务器上面的pdf文件到手机
使用服务器

1. 获取pdf文件的url

要下载pdf文件，必须先获取到pdf文件的url地址。
假如你的pdf文件是在自己的服务器上面，那么可以直接使用该pdf文件的url，假如是在其它服务器上面，则必要接洽对应服务器的管理员获取该文件的url。获取到pdf文件的url后，你可以将其嵌入到一个 web-view 组件中，如下：
  1. <web-view src="pdf-url"></web-view>
复制代码
这样就可以在微信小程序中表现该pdf文件了。
2. 下载pdf文件

假如用户必要将该pdf文件下载到本地，可以使用 downloadFile 方法实现。
详细步调如下：
  1. <button bindtap="downloadPDF">下载PDF</button>
复制代码
  1. downloadPDF: function() {
  2.   wx.downloadFile({
  3.     url: 'pdf-url',
  4.     success: function (res) {
  5.       // 下载成功后，调用saveImageToPhotosAlbum函数保存图片到本地
  6.       wx.saveFile({
  7.         tempFilePath: res.tempFilePath,
  8.         success: function (res) {
  9.           wx.showToast({
  10.             title: '下载成功',
  11.             icon: 'success'
  12.           })
  13.         },
  14.         fail: function (res) {
  15.           wx.showToast({
  16.             title: '下载失败',
  17.             icon: 'none'
  18.           })
  19.         }
  20.       })
  21.     },
  22.     fail: function (res) {
  23.       wx.showToast({
  24.         title: '下载失败',
  25.         icon: 'none'
  26.       })
  27.     }
  28.   })
  29. }
复制代码
这样用户点击下载按钮后，就可以将pdf文件下载到本地了。
3. 示例阐明

示例1

假设你的pdf文件在自己的服务器上，pdf文件的url为 http://example.com/pdf/file.pdf，那么你可以在相应页面的 web-view 组件中嵌入该pdf文件，如下：
  1. <web-view src="http://example.com/pdf/file.pdf"></web-view>
复制代码
用户可以直接通过该web-view组件在线查看pdf文件，也可以点击相应的下载按钮将文件下载到本地。
示例2

假设你的pdf文件不在自己的服务器上，而是在其它服务器上，且文件url为 http://other.com/file.pdf，那么在相应页面的js中添加如下代码：
  1. downloadPDF: function() {
  2.   wx.downloadFile({
  3.     url: 'http://other.com/file.pdf',
  4.     success: function (res) {
  5.       // 下载成功后，调用saveImageToPhotosAlbum函数保存图片到本地
  6.       wx.saveFile({
  7.         tempFilePath: res.tempFilePath,
  8.         success: function (res) {
  9.           wx.showToast({
  10.             title: '下载成功',
  11.             icon: 'success'
  12.           })
  13.         },
  14.         fail: function (res) {
  15.           wx.showToast({
  16.             title: '下载失败',
  17.             icon: 'none'
  18.           })
  19.         }
  20.       })
  21.     },
  22.     fail: function (res) {
  23.       wx.showToast({
  24.         title: '下载失败',
  25.         icon: 'none'
  26.       })
  27.     }
  28.   })
  29. }
复制代码
这样就可以将该pdf文件下载到本地了。
云开发

   项目场景：
最近有小伙伴问了一个问题，那就是微信小程序云开发怎样将页面天生为pdf？但是在没有后端工程师的帮助下，我们要怎么办了？
  解决方案

wxml→canvas→img→pdf，
wxml转化转化成canvas之后在天生img，微信官方已经给出了组件wxml-to-canvas可以解决，那么img转化成pdf要怎么办呢？
可以用pdf-lib，幸亏看到了黄宝～这位大佬的文章，省去了许多时间去理解文档。
效果图

可以从GIF中看到，我已经把要用到的功能都写完善了，点击天生pdf后会天生一张图片存到云服务器，之后会调用云函数把图片转换成pdf文件并上传到云服务器（转换后其实可以把多余的图片删了，但是为了直观一点我就不处理了），这样我们就可以拿云服务器上https链接来用了。
由于小程序还不支持把pdf文件保存到手机上，所以只能自己复制链接去欣赏器下载了。

在实机上，微信会提供预览功能但是不可以直接下载，自己复制下载链接到欣赏器下载就好。

Demo部门

代码我就不粘出来了，有点多，必要的话有积分可以下载CSDN的，没有的话下载百度云的就好。
CSDN -> 传送门
百度网盘=》提取码：agvk =》传送门
下载代码 Demo后，导入项目时用自己开通过云开发的AppID就好
接着把app.js里的云环境id换成你自己的

接着打开img-to-pdf云函数里的index.js文件，把云环境id换成你自己的

末了就是上传云函数了，务必记得上传，上传完就可以用了。

另外img-to-pdf云函数里的node包里安装了pdf-lib，为了方便本地测试，我就不删除了。代码的话主要部门都写相识释，问题不大，应该都能看懂。
动态设置参数

由于这的wxml是一串字符串，所以不能向样式那样通过点的形式去更新，所以假如必要动态设置参数的话，必要把字符串标签提取出来写在renderToCanvas方法里，假如数据是数组对象范例，那么用for循环拼接一下字符就好了，字符串拼接可以参考这篇文章=》传送门
  1. const {style} = require('./wxml.js');
  3. Page({
  4.   data: {
  5.     src: ''
  6.   },
  8.   onLoad() {
  9.     // 为了美观，把画布的宽度设置成屏幕的100%
  10.     style.container.width = wx.getSystemInfoSync().windowWidth;
  11.     // 获取wxml-to-canvas组件的节点
  12.     this.widget = this.selectComponent('.widget')
  13.     // 模拟调用接口
  14.     setTimeout(() => {
  15.       // 假设从后端获取到了数据
  16.       let name = "weianl"
  17.       this.renderToCanvas(name)
  18.     })
  19.   },
  21.   // 把页面数据渲染到canvas
  22.   renderToCanvas(name) {
  23.     const wxml = `<view class="container">
  24.                     <view class="item-box red">
  25.                     <text class="text">${name}</text>
  26.                     </view>
  27.                     <view class="arrows">
  28.                       <text class="text">↓</text>
  29.                     </view>
  30.                     <view class="item-box green">
  31.                       <text class="text">cavans ☛ img</text>
  32.                     </view>
  33.                     <view class="arrows">
  34.                       <text class="text">↓</text>
  35.                     </view>
  36.                     <view class="item-box blue">
  37.                       <text class="text">img ☛ pdf</text>
  38.                     </view>
  39.                   </view>`
  40.     this.widget.renderToCanvas({
  41.       wxml,
  42.       style
  43.     }).then((res) => {
  44.       // console.log('container', res.layoutBox)
  45.       this.container = res
  46.     }).catch(err => {
  47.       // console.log(err)
  48.       // 防止canvas组件没有初始化完成
  49.       setTimeout(() => {
  50.         this.renderToCanvas(name)
  51.       }, 100);
  52.     })
  53.   },
  55.   // 生成pdf
  56.   createPDF() {
  57.     wx.showLoading({
  58.       title: '生成中',
  59.     })
  60.     this.widget.canvasToTempFilePath().then(res => {
  61.       console.log(res)
  62.       let tempFilePath = res.tempFilePath;
  63.       // 定义存放到云服务器的文件夹及图片名字
  64.       const cloudPath = 'wxmlToPdf-img/' + parseInt(new Date().getTime() / 1000) + '.png';
  65.       // 把图片上传到云服务器
  66.       wx.cloud.uploadFile({
  67.         cloudPath: cloudPath,
  68.         filePath: tempFilePath, // 文件路径
  69.       }).then(res => {
  70.         console.log(res)
  71.         // 调用图片转化PDF云函数
  72.         wx.cloud.callFunction({
  73.           name: 'img-to-pdf',
  74.           data: {
  75.             width: this.container.layoutBox.width,
  76.             height: this.container.layoutBox.height,
  77.             fileID_img: res.fileID
  78.           }
  79.         }).then(res => {
  80.           console.log(res)
  81.           wx.hideLoading()
  82.           this.setData({
  83.             fileID_pdf: res.result.data.fileID,
  84.             https_pdf: res.result.data.pdf
  85.           })
  86.           wx.showToast({
  87.             title: '生成成功！',
  88.             icon: 'none'
  89.           })
  90.         })
  91.       }).catch(error => {
  92.         // handle error
  93.       })
  95.     })
  96.   },
  98.   // 预览PDF
  99.   previewPDF() {
  100.     // pdf文件在云服务器的id
  101.     let fileID_pdf = this.data.fileID_pdf;
  102.     // console.log(fileID_pdf)
  103.     if (!fileID_pdf) {
  104.       wx.showToast({
  105.         title: '请先生成PDF',
  106.         icon: 'none'
  107.       })
  108.       return false;
  109.     }
  110.     wx.showLoading({
  111.       title: '加载中',
  112.     })
  113.     wx.cloud.downloadFile({
  114.       fileID: fileID_pdf
  115.     }).then(res => {
  116.       // console.log(res)
  117.       wx.openDocument({
  118.         filePath: res.tempFilePath,
  119.         success: function (res) {
  120.           wx.hideLoading();
  121.         }
  122.       })
  123.     }).catch(error => {
  124.       // handle error
  125.     })
  126.   },
  128.   // 复制PDF链接
  129.   copyPDF() {
  130.     // PDF文件在云服务器上的https链接
  131.     let https_pdf = this.data.https_pdf;
  132.     // console.log(https_pdf)
  133.     if (!https_pdf) {
  134.       wx.showToast({
  135.         title: '请先生成PDF',
  136.         icon: 'none'
  137.       })
  138.       return false;
  139.     }
  140.     wx.setClipboardData({
  141.       data: https_pdf,
  142.       success(res) {
  143.         wx.showToast({
  144.           title: '复制成功，快到浏览器打开/下载！',
  145.           icon: 'none',
  146.           duration: 3000
  147.         })
  148.       }
  149.     })
  150.   }
  152. })
复制代码
末了想补习云函数的可以点击这里哦！！ 传送门

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4