【微信小程序】实现打开并下载服务器上面的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>

复制代码

• 在js中界说downloadPDF函数，并在该函数中通过downloadFile方法将pdf文件下载到本地。
  

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企服之家，中国第一个企服评测及商务社交产业平台。