zoukankan      html  css  js  c++  java
  • a标签的download属性

    a标签加上downlaod属性后,就可完成对href属性链接文件的下载,但仅仅是限于同源文件,如果是非同源,download属性会失效。

    无download属性的时候,a标签的默认行为是链接跳转进行预览,而针对浏览无法预览的文件,也可达到下载的效果。

    怎么解决下载非同源文件的问题?? 例如image图片

    方法: 通过canvas绘制,生成临时路径 (

    data协议路径  // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"

    ),这个路径就是一个同源路径,然后传入下载函数进行下载。 

     1 let img = new Image();
     2 img.setAttribute('crossOrigin', 'anonymous')
     3 img.src = data.entry;
     4 img.onload = function(data) {
     5     let canvas = document.createElement('canvas');
     6     canvas.width = img.width;
     7     canvas.height = img.height;
     8     let context = canvas.getContext('2d');
     9     context.drawImage(img, 0, 0, canvas.width, canvas.height);
    10     let url = canvas.toDataURL('image/png');
    11     downLoadByLink(url,"小程序码");
    12 }
    const downLoadByLink = (url, filename) =>{
        //如果提供filename,则filename需要包含扩展名
        var link,
            evt;
        
        link = document.createElement('a');
        link.href = url;
        filename && link.setAttribute('download', filename);
        if(document.fireEvent) {
            window.open(link.href);
        }else {
            evt = document.createEvent('MouseEvents');
            evt.initEvent('click', true, true);
            link.dispatchEvent(evt);
        }
    };
  • 相关阅读:
    SQL_server 将表中的记录 转换成 Insert(插入) SQL 语句
    Delphi DBGridEh导出Excel
    hdu 2018 母牛的故事
    hdu 2084 数塔
    hdu 2190 重建希望小学
    hdu 2501 Tiling_easy version
    hdu 2046 骨牌铺方格
    hdu 2045 不容易系列之(3)—— LELE的RPG难题
    高精度模板
    各种平面分割问题总结(转)
  • 原文地址:https://www.cnblogs.com/yunnex-xw/p/10621174.html
Copyright © 2011-2022 走看看