关于微信端屏蔽前端实现的文件下载功能

前段时间在做微信公众号，需要实现微信端pdf下载，后端返回的是pdf文件的base64字符串，我在前端使用pdf.js插件来把base64字符串以pdf文件的样式显示在微信端浏览器。首先，总结一下我知道的实现方式，分为两种：

1. 前端纯js实现pdf文件下载；
2. 由后端提供下载接口（后端实现文件下载，前端只需要访问接口地址）。

然后，我们论述一下第一种方式：
pdf.js插件有自带下载功能，但是无法下载（如图），具体原因请继续看讲述。因为起初不了解是否是微信端拦截了前端实现的文件下载，所以自己又用js写了一个pdf下载的功能，代码如下：

    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(',');
        var mime = arr[0].match(/:(.*?);/)[1];
        var bstr = atob(arr[1]);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }

    function downloadFile(url, name) {
        var a = document.createElement("a")
        a.setAttribute("href", url)
        a.setAttribute("download", name)
        a.setAttribute("target", "_blank")
        let clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", true, true);
        a.dispatchEvent(clickEvent);
    }

    function downloadFileByBase64(base64, name) {
        var myBlob = dataURLtoBlob(base64)
        var myUrl = URL.createObjectURL(myBlob)
        downloadFile(myUrl, name)
    }

    downloadFileByBase64('data:application/pdf;base64,' + base64STR);

pdf.js实现效果图：

被拦截：

第二种方式也是最终的解决方案。在服务器端实现pdf文件的下载功能，后端提供下载接口，前端直接访问接口。