微信小程序嵌套H5 实现文件下载复制粘贴

阳光下的雨u

已于 2023-06-01 10:01:53 修改

阅读量1.3k

点赞数 2

文章标签：微信小程序小程序

于 2023-06-01 09:59:40 首次发布

本文链接：https://blog.csdn.net/smile2333/article/details/130981800

版权

小程序中嵌套的H5 需要实现如 pdf 文件下载功能
由于微信环境的限制，直接下载或者打开新窗口会失败（域名之类的限制）

实现思路，可以复制链接，手动去浏览器打开实现下载

下载插件 clipboardjs插件 (还可以解决ios复制粘贴的兼容问题)

npm install clipboard --save

页面引用

import Clipboard from "clipboard";

使用

<div class="item_fool">
  <div class="lrbox">
    <span class="fool_l">已开票</span>
    <span class="fool_m">2023-05-05</span>
  </div>
  <van-button class="fool_r  downLoad" text="下载发票" color="#FF6C00" size="small" round @click="showPDF(listItem)"></van-button>
</div>

 // 下载发票
    showPDF (item) { 
      // 复制
       let clipboard = new Clipboard('.downLoad', {  //单页面引用
        text: () => {
          return item.invoicePdfUrl  //文件的链接地址
        }
      })
      clipboard.on('success', (e) => { 
        console.info('Text:', e.text); //复制的内容
        console.info('Trigger:', e.trigger); //节点
        e.clearSelection(); //清除选中的文字的选择状态  
        this.$Toast('已复制,请到浏览器中打开'); 
        clipboard.destroy();     // 释放内存
      });
      clipboard.on('error', (e) => {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
        this.$Toast(该浏览器不支持自动复制');
        clipboard.destroy();     // 释放内存
      }); 
    },