小程序中嵌套的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(); // 释放内存
});
},