微信小程序 h5 app 实现文件下载 支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。

 

 

 

 

1. <template>
2.  
   <div>
3.  
   <!-- #ifdef APP-PLUS -->
4.  
   <button @click="test.exportPDF">预览和下载pdf（renderjs）</button>
5.  
   <button @click="exportPDF">预览和下载pdf（uniapp api）</button>
6.  
   <!-- #endif -->
7.  
   <!-- #ifndef APP-PLUS -->
8.  
   <button @click="exportPDF">预览和下载pdf</button>
9.  
   <!-- #endif -->
10.  
    </div>
11.  
    </template>
12.  
     
13.  
    <!-- #ifdef APP-PLUS -->
14.  
    <script module="test" lang="renderjs">
15.  
    export default {
16.  
    methods: {
17.  
    exportPDF() {
18.  
    const Url = "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf"
19.  
    const a = document.createElement("a")
20.  
    a.href = Url
21.  
    a.download = "download"
22.  
    a.click()
23.  
    }
24.  
    }
25.  
    }
26.  
    </script>
27.  
    <!-- #endif -->
28.  
     
29.  
    <script>
30.  
    export default {
31.  
    methods: {
32.  
    exportPDF() {
33.  
    // #ifdef H5
34.  
    window.open(
35.  
    "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf"
36.  
    )
37.  
    // #endif
38.  
     
39.  
    // 微信下载文件需要在微信公众平台>开发>开发管理>服务器域名>downloadFile合法域名>配置白名单域名
40.  
    // #ifdef MP-WEIXIN
41.  
    uni.downloadFile({
42.  
    url:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf",              //文件地址
43.  
    success: res => {
44.  
    console.log(res)
45.  
    if (res.statusCode === 200) {
46.  
    // 预览pdf文件
47.  
    uni.openDocument({
48.  
    filePath: res.tempFilePath,
49.  
    showMenu: true, // 右上角菜单，可以进行分享保存pdf
50.  
    success: function(file) {
51.  
    console.log("file-success", file)
52.  
    }
53.  
    })
54.  
    }
55.  
    }
56.  
    })
57.  
    // #endif
58.  
     
59.  
    // #ifdef APP-PLUS
60.  
    uni.downloadFile({
61.  
    url:
62.  
    "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf",
63.  
    success: res => {
64.  
    console.log(res)
65.  
    if (res.statusCode === 200) {
66.  
    // 保存pdf文件至手机，一般安卓端存储路径为：手机存储/dcim/camera文件夹下
67.  
    uni.saveImageToPhotosAlbum({
68.  
    filePath: res.tempFilePath,
69.  
    success: function() {
70.  
    uni.showToast({
71.  
    title: "文件已保存至/DCIM/CAMERA文件夹下",
72.  
    icon: "none"
73.  
    })
74.  
    setTimeout(function() {
75.  
    // 预览pdf文件
76.  
    uni.openDocument({
77.  
    filePath: res.tempFilePath,
78.  
    showMenu: true,
79.  
    success: function(file) {
80.  
    console.log("file-success", file)
81.  
    }
82.  
    })
83.  
    }, 1500)
84.  
    },
85.  
    fail: function() {
86.  
    uni.showToast({
87.  
    title: "保存失败，请稍后重试！",
88.  
    icon: "none"
89.  
    })
90.  
    }
91.  
    })
92.  
    }
93.  
    }
94.  
    })
95.  
    // #endif
96.  
    }
97.  
    }
98.  
    }
99.  
    </script>