使用form实现下载功能

小鱼儿 2022-10-02 02:58 207阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

没啥好说的，直接上代码

import $ from 'jquery';
    import Config from '@common/constants';
    
    const formatUrl = (url) => {
      return /https?:\/\//gi.test(url) ? url : `${Config.NEWAPI}${url}`;
    };
    const getValueByData = (data) => {
      return typeof data === 'object' ? JSON.stringify(data) : data;
    };
    const doDownload = (url, param) => {
      const iframe = $('<iframe style="display:none" src="about:blank"></iframe>').appendTo('body');
      let iframeDoc = iframe[0].contentWindow || iframe[0].contentDocument;
      if (iframeDoc.document) {
        iframeDoc = iframeDoc.document;
      }
      iframeDoc.open();
      // 固定为get请求
      iframeDoc.write('<html><head></head><body><form method="get"></form></body></html>');
      const form = $(iframeDoc).find('form');
      form.attr('action', url);
      const $container = $('<div/>');
      param && Object.keys(param).forEach((key) => {
        const paramItem = param[key];
        if (
          paramItem === undefined ||
          paramItem === null ||
          paramItem === '' ||
          (Array.isArray(paramItem) && paramItem.length === 0)
        ) {
          return;
        }
        if (Array.isArray(paramItem)) {
          paramItem.forEach((item) => {
            const checkVal = getValueByData(item);
            const $checkbox = $('<input>', { type: 'checkbox', name: key, attr: { checked: 'checked' } });
            // checkbox只能这样赋值，不然在ie下值会为'on'
            $checkbox.val(checkVal);
            $container.append($checkbox);
          });
          return;
        }
        const value = getValueByData(paramItem);
        const $input = $('<input>', { val: value, type: 'hidden', name: key });
        // $input.val(value);
        $container.append($input);
      });
      form.append($container);
      form.submit();
    };
    
    /**
     *  模拟form表单提交, 用于下载
     *  @param url 后台请求的url
     *  @param data 请求的参数可位Object或者数组，如{param1: '1', param2: '2'},如果为数组，则分多批导出
     */
    const iframeDownload = (url, data) => {
      if (!url) {
        return;
      }
      const newUrl = formatUrl(url);
      if (data instanceof Array) {
        data.forEach((item) => {
          doDownload(newUrl, item);
        });
        return;
      }
      doDownload(newUrl, data);
    };
    
    export default iframeDownload;

转载于:https://my.oschina.net/wangch5453/blog/3021543

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/d269eddb43c2441a8c028593bc03df2d.png