526互联

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

发布时间 2023-07-17 16:20:39作者: 张二十

 

 

 

 

  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>