file-saver#saveAs JavaScript Examples

function save(promise, listOfUIDs) {
  return Promise.resolve(promise)
    .then(url => {
      OHIF.log.info('Files successfully compressed:', url);
      const StudyInstanceUID = hierarchicalListUtils.getItem(listOfUIDs, 0);
      saveAs(url, `${StudyInstanceUID}.zip`);
      return url;
    })
    .catch(error => {
      OHIF.log.error('Failed to create Zip file...', error);
      return null;
    });
}

export function export_table_to_excel(id) {
  var theTable = document.getElementById(id);
  var oo = generateArray(theTable);
  var ranges = oo[1];

  /* original data */
  var data = oo[0];
  var ws_name = "SheetJS";

  var wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data);

  /* add ranges to worksheet */
  // ws['!cols'] = ['apple', 'banan'];
  ws['!merges'] = ranges;

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary'
  });

  saveAs(new Blob([s2ab(wbout)], {
    type: "application/octet-stream"
  }), "test.xlsx")
}

test('triggers a save of the canvas Blob when clicking Download btn', async () => {
  // set a Promise that resolves when our saveAs mock is called
  const saveCalled = new Promise((resolve) => {
    saveAs.mockClear();
    saveAs.mockImplementation(resolve);
  });

  let getByText;
  await act(async () => {
    ({ getByText } = render(<MemeCreator />));
  });

  // click Download btn
  await act(async () => {
    const dlBtn = getByText(/download/i);
    fireEvent.click(dlBtn);
  });

  await saveCalled;
  expect(saveAs).toHaveBeenCalledTimes(1);

  saveAs.mockImplementation(() => {}); // set mock back to a noop
});

test('triggers a save of the canvas Blob when clicking Download btn', async () => {
  // set a Promise that resolves when our saveAs mock is called
  const saveCalled = new Promise((resolve) => {
    saveAs.mockClear();
    saveAs.mockImplementation(resolve);
  });

  let getByText;
  await act(async () => {
    ({ getByText } = render(<MemeCreator />));
  });

  // click Download btn
  await act(async () => {
    const dlBtn = getByText(/download/i);
    fireEvent.click(dlBtn);
  });

  await saveCalled;
  expect(saveAs).toHaveBeenCalledTimes(1);

  saveAs.mockImplementation(() => {}); // set mock back to a noop
});

test('triggers a save of the canvas Blob when clicking Download btn', async () => {
  // set a Promise that resolves when our saveAs mock is called
  const saveCalled = new Promise((resolve) => {
    saveAs.mockClear();
    saveAs.mockImplementation(resolve);
  });

  let getByText;
  await act(async () => {
    ({ getByText } = render(<MemeCreator />));
  });

  // click Download btn
  await act(async () => {
    const dlBtn = getByText(/download/i);
    fireEvent.click(dlBtn);
  });

  await saveCalled;
  expect(saveAs).toHaveBeenCalledTimes(1);

  saveAs.mockImplementation(() => {}); // set mock back to a noop
});

exportFile = async (blob, filename) => {
  const manifest = await browser.runtime.getManifest();
  if (typeof browser !== 'undefined' && manifest.browser === 'firefox') {
    browser.runtime.sendMessage({
      action: 'export-file',
      blob,
      filename
    });
  } else {
    saveAs(blob, filename);
  }
}

function App() {
  async function downloadDocx(params) {
    const fileBuffer = await HTMLtoDOCX(htmlString, null, {
      table: { row: { cantSplit: true } },
      footer: true,
      pageNumber: true,
    });

    saveAs(fileBuffer, 'html-to-docx.docx');
  }

  return (
    <div className="App">
      <header className="App-header">
        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
        <a className="App-link" href="#" onClick={downloadDocx}>
          Learn React
        </a>
      </header>
    </div>
  );
}

export function* getConfirmationFile({ uuid }) {
  const locale = yield select(makeSelectLocale());
  const { accessToken } = yield select(makeSelectToken());
  const requestURL = `${api.transactions('confirmationFile')(uuid, locale)}`;
  const requestParameters = {
    responseType: 'blob',
    headers: { Authorization: `Bearer ${accessToken}` },
  };

  try {
    const response = yield call(request, requestURL, requestParameters, false);
    const pdfBlob = new Blob([response], { type: 'application/pdf' });
    saveAs(pdfBlob, `${uuid}.pdf`);

    yield put(getConfirmationFileSuccessAction());
  } catch (error) {
    yield put(getConfirmationFileErrorAction(error));
    yield put(push(routes.login.path));
  }
}

function ExportToFileContent() {
    const localState = useSelector(state => state);

    const saveStateToFile = () => {
        const blob = new Blob([JSON.stringify(localState)], { type: 'text/plain;charset=utf-8' });
        saveAs(blob, `osLeagueTools_backup_${Date.now()}.txt`);
    };

    return (
        <>
            <p className='m-2 mt-1'>
                Export all your data to a file if you'd like to create a backup, or to transfer it to another computer.
            </p>
            <div className='flex'>
                <button className='w-full m-1 button-filled mb-2' onClick={saveStateToFile} type='button'>
                    Export
                </button>
            </div>
        </>
    );
}

export function exportTxtToZip(th, jsonData, txtName, zipName) {
  return new Promise((resolve, reject) => {
    const zip = new JSZip()
    const fileTxtName = txtName || 'file'
    const fileZipName = zipName || 'file'
    const data = jsonData
    let txtData = `${th}\r\n`
    data.forEach(row => {
      let tempStr = ''
      tempStr = row.toString()
      txtData += `${tempStr}\r\n`
    })
    zip.file(`${fileTxtName}.txt`, txtData)
    zip
      .generateAsync({
        type: 'blob'
      })
      .then(
        blob => {
          saveAs(blob, `${fileZipName}.zip`)
          resolve(true)
        },
        err => {
          alert('导出失败')
          reject(err)
        }
      )
  })
}

/**
 * @description txt压缩文件
 * @param { Array<string> } th 头部
 * @param { Array<any[]> } jsonData 导出的数据
 * @param { string } txtName 导出txt的名字
 * @param { string } zipName 导出压缩包的名字
 * @returns {Promise<Blob>} 文件流
 */
export function export_txt_to_zip(th, jsonData, txtName, zipName) {
  return new Promise((resolve, reject)=>{
    const zip = new JSZip()
    const txt_name = txtName || 'file'
    const zip_name = zipName || 'file'
    const data = jsonData
    let txtData = `${th}\r\n`
    data.forEach((row) => {
      let tempStr = ''
      tempStr = row.toString()
      txtData += `${tempStr}\r\n`
    })
    zip.file(`${txt_name}.txt`, txtData);
    zip.generateAsync({
      type: "blob"
    }).then((blob) => {
      resolve(saveAs(blob, `${zip_name}.zip`))
    }, (err) => {
      reject(err);
      alert('导出失败')
    })
  });
}

export function export_table_to_excel(id) {
  var theTable = document.getElementById(id);
  var oo = generateArray(theTable);
  var ranges = oo[1];

  /* original data */
  var data = oo[0];
  var ws_name = 'SheetJS';

  var wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data);

  /* add ranges to worksheet */
  // ws['!cols'] = ['apple', 'banan'];
  ws['!merges'] = ranges;

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary',
  });

  saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream',
    }),
    'test.xlsx',
  );
}

function save_obj() {
    var smooth = jQuery('#subdivideSLT').val() > 0 ? jQuery('#subdivideSLT').val() : undefined;
    var mirroredPose = CK.character.data.mirroredPose;


    var group = process(CK.character, smooth, mirroredPose);

    var exporter = new OBJExporter();
    var fileString = exporter.parse(group);

    var name = get_name();

    var blob = new Blob([fileString], { type: "text/plain;charset=utf-8" });
    saveAs(blob, name + ((smooth) ? '-smooth' : '') + '.obj');
}

function save_stl() {
    var smooth = jQuery('#subdivideSLT').val() > 0 ? jQuery('#subdivideSLT').val() : undefined;
    var mirroredPose = CK.character.data.mirroredPose;

    var group = process(CK.character, smooth, mirroredPose);

    var exporter = new STLExporter();
    var fileString = exporter.parse(group);

    var name = get_name();

    var blob = new Blob([fileString], { type: "application/sla;charset=utf-8" });
    saveAs(blob, name + ((smooth) ? '-smooth' : '') + '.stl');
}

DownloadCSV = ({csv}) => {

    const [alert, setAlert] = useState(null);

    const download = () => {
        
        var fileName = 'result.csv';
        
        var fileToSave = new Blob([csv.map(row => row.join(',')).join('\n')], {
            type: 'application/csv',
            name: fileName
        });
        
        saveAs(fileToSave, fileName);
        
        setAlert('downloaded');
        
        setTimeout(() => setAlert(null), 1500);
        
    }

    return(
        <button onClick = {download}>{ alert !== 'downloaded' ? <><DownloadIcon/>Download CSV</> : <><CheckCircleIcon/>Downloading</>}</button>
    );

}

export function export_txt_to_zip(th, jsonData, txtName, zipName) {
  const zip = new JSZip()
  const txt_name = txtName || 'file'
  const zip_name = zipName || 'file'
  const data = jsonData
  let txtData = `${th}\r\n`
  data.forEach((row) => {
    let tempStr = ''
    tempStr = row.toString()
    txtData += `${tempStr}\r\n`
  })
  zip.file(`${txt_name}.txt`, txtData)
  zip.generateAsync({
    type: "blob"
  }).then((blob) => {
    saveAs(blob, `${zip_name}.zip`)
  }, (err) => {
    alert('导出失败')
  })
}

function save_stl() {
    var smooth = jQuery('#subdivideSLT').val() > 0 ? jQuery('#subdivideSLT').val() : undefined;
    var mirroredPose = CK.character.data.mirroredPose;

    var group = process(CK.character, smooth, mirroredPose);

    var exporter = new STLExporter();
    var fileString = exporter.parse(group);

    var name = get_name();

    var blob = new Blob([fileString], { type: "application/sla;charset=utf-8" });
    saveAs(blob, name + ((smooth) ? '-smooth' : '') + '.stl');
}

function save_obj() {
    var smooth = jQuery('#subdivideSLT').val() > 0 ? jQuery('#subdivideSLT').val() : undefined;
    var mirroredPose = CK.character.data.mirroredPose;


    var group = process(CK.character, smooth, mirroredPose);

    var exporter = new OBJExporter();
    var fileString = exporter.parse(group);

    var name = get_name();

    var blob = new Blob([fileString], { type: "text/plain;charset=utf-8" });
    saveAs(blob, name + ((smooth) ? '-smooth' : '') + '.obj');
}

DownloadJSON = ({json, edit, indent}) => {

    const [alert, setAlert] = useState(null);

    const download = () => {
        
        var fileName = 'result.json';
        
        var fileToSave = new Blob([JSON.stringify(json, null, parseInt(indent))], {
            type: 'application/json',
            name: fileName
        });
        
        saveAs(fileToSave, fileName);
        
        setAlert('downloaded');
        
        setTimeout(() => setAlert(null), 1500);
        
    }

    return(
        <button disabled = {edit} onClick = {download}>{ alert !== 'downloaded' ? <><DownloadIcon/>Download JSON</> : <><CheckCircleIcon/>Downloading</>}</button>
    );

}

export function exportJsonToExcel(options) {
  const { multiHeader = [], header, data, filename, merges = [], autoWidth = true, bookType = 'xlsx' } = options || {}
  const downloadFilename = filename || 'excel-list'
  const cloneData = data.slice()
  cloneData.unshift(header)

  for (let i = multiHeader.length - 1; i > -1; i--) {
    cloneData.unshift(multiHeader[i])
  }

  const wsName = 'SheetJS'
  const wb = new Workbook()
  const ws = sheetFromArrayOfArrays(cloneData)

  if (merges.length > 0) {
    if (!ws['!merges']) ws['!merges'] = []
    merges.forEach(item => {
      ws['!merges'].push(XLSX.utils.decode_range(item))
    })
  }

  if (autoWidth) {
    /* 设置worksheet每列的最大宽度*/
    const colWidth = cloneData.map(row =>
      row.map(val => {
        /* 先判断是否为null/undefined*/
        if (val === null) {
          return {
            wch: 10
          }
        } else if (val.toString().charCodeAt(0) > 255) {
          /* 再判断是否为中文*/
          return {
            wch: val.toString().length * 2
          }
        }
        return {
          wch: val.toString().length
        }
      })
    )
    /* 以第一行为初始值*/
    const result = colWidth[0]
    for (let i = 1; i < colWidth.length; i++) {
      for (let j = 0; j < colWidth[i].length; j++) {
        if (result[j].wch < colWidth[i][j].wch) {
          result[j].wch = colWidth[i][j].wch
        }
      }
    }
    ws['!cols'] = result
  }

  /* add worksheet to workbook */
  wb.SheetNames.push(wsName)
  wb.Sheets[wsName] = ws

  const wbout = XLSX.write(wb, {
    bookType,
    bookSST: false,
    type: 'binary'
  })
  saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream'
    }),
    `${downloadFilename}.${bookType}`
  )
}

about() {
    return (
      <div id="about" className="modal">
        <div className="modal__content">
          <h1>About</h1>
          <div>
            <p className="basic_about">
              This is an exploratory project that uses a regular neural network
              to teach AI how to play Tic Tac Toe. The most common method of
              solving Tic Tac Toe is normally using Q-Learning, but what fun is
              that?
            </p>
            <p>
              By playing an effective 6 or 7 games you can make a pretty
              unbeatable AI!
            </p>
          </div>
          <div>
            <a
              onClick={() =>
                this.state.activeModel.save("downloads://ttt_model")
              }
              className="btn effect01"
            >
              <span>Download Current AI Model</span>
            </a>
            <br />
            <a
              onClick={() => {
                const blob = new Blob(
                  [
                    `
{
  "createdWith": "https://www.tensorflowtictactoe.co/",
  "creationDate": "${new Date().toISOString().split("T")[0]}",
  "games": ${JSON.stringify(this.state.games, null, 2)}
}`,
                  ],
                  {
                    type: "application/json;charset=utf-8",
                  }
                );
                saveAs(blob, "tictactoe.json");
              }}
              className="btn effect01"
            >
              <span>Download Past Games Training Data</span>
            </a>
          </div>
          <br />
          <div className="modal__footer">
            Made with ♥️ by{" "}
            <a
              href="https://twitter.com/gantlaborde"
              rel="noopener noreferrer"
              target="_blank"
            >
              @GantLaborde
            </a>{" "}
            and{" "}
            <a
              href="https://infinite.red"
              rel="noopener noreferrer"
              target="_blank"
            >
              Infinite Red
            </a>
          </div>
          <a href="#" className="modal__close">
            &times;
          </a>
        </div>
      </div>
    );
  }

export function export_json_to_excel({
  multiHeader = [],
  header,
  data,
  filename,
  merges = [],
  autoWidth = true,
  bookType = 'xlsx'
} = {}) {
  /* original data */
  filename = filename || 'excel-list'
  data = [...data]
  data.unshift(header);

  for (let i = multiHeader.length - 1; i > -1; i--) {
    data.unshift(multiHeader[i])
  }

  var ws_name = "SheetJS";
  var wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data);

  if (merges.length > 0) {
    if (!ws['!merges']) ws['!merges'] = [];
    merges.forEach(item => {
      ws['!merges'].push(XLSX.utils.decode_range(item))
    })
  }

  if (autoWidth) {
    /*设置worksheet每列的最大宽度*/
    const colWidth = data.map(row => row.map(val => {
      /*先判断是否为null/undefined*/
      if (val == null) {
        return {
          'wch': 10
        };
      }
      /*再判断是否为中文*/
      else if (val.toString().charCodeAt(0) > 255) {
        return {
          'wch': val.toString().length * 2
        };
      } else {
        return {
          'wch': val.toString().length
        };
      }
    }))
    /*以第一行为初始值*/
    let result = colWidth[0];
    for (let i = 1; i < colWidth.length; i++) {
      for (let j = 0; j < colWidth[i].length; j++) {
        if (result[j]['wch'] < colWidth[i][j]['wch']) {
          result[j]['wch'] = colWidth[i][j]['wch'];
        }
      }
    }
    ws['!cols'] = result;
  }

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {
    bookType: bookType,
    bookSST: false,
    type: 'binary'
  });
  saveAs(new Blob([s2ab(wbout)], {
    type: "application/octet-stream"
  }), `${filename}.${bookType}`);
}

jest.mock('file-saver', () => ({
  saveAs: jest.fn(),
}));

jest.mock('file-saver', () => ({
  saveAs: jest.fn(),
}));

function MemeCreator() {
  const canvasRef = useRef(null);
  const [image, setImage] = useState(null);
  const [caption, setCaption] = useState('');
  const [meme, setMeme] = useState(memeTemplates[0].value);

  function onCaptionInput(event){
    setCaption(event.target.value);
  }

  function onMemeSelect(event) {
    setMeme(event.target.value);
  }

  async function downloadMeme() {
    const canvas = canvasRef.current;
    const blob = await new Promise(resolve => canvas.toBlob(resolve));
    saveAs(blob, 'meme.png');
  }

  useEffect(() => {
    async function loadMemeTemplate(memeValue) {
      const template = memeTemplates.find(template => template.value === memeValue);
      const img = new window.Image();

      await new Promise((resolve, reject) => {
        img.onload = resolve;
        img.onerror = reject;
        img.src = process.env.PUBLIC_URL + template.path;
      });

      setImage(img);
    }

    loadMemeTemplate(meme);
  }, [meme]);

  useEffect(() => {
    function drawCanvas(image, caption) {
      const { height, width } = image;
      const canvas = canvasRef.current;
      canvas.width = width;
      canvas.height = height;

      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, width, height);
      ctx.drawImage(image, 0, 0);
      ctx.font = "40px sans-serif";
      ctx.fillStyle = 'white';
      ctx.strokeStyle = 'black';
      ctx.textAlign = 'center';
      ctx.fillText(caption, width * 0.5, height * 0.15);
      ctx.strokeText(caption, width * 0.5, height * 0.15);
    }

    if (image) {
      drawCanvas(image, caption);
    }
  }, [image, caption]);

  return (
    <div className={styles.root}>
      <label className={styles.label}>
        Select a meme template <br />
        <select value={meme} onChange={onMemeSelect} className={styles.select}>
          { memeTemplates.map(template =>
            <option key={template.value} value={template.value}>{template.text}</option>
          )}
        </select>
      </label>
      <label className={styles.label}>
        Enter your meme caption <br />
        <input type="text" value={caption} onChange={onCaptionInput}
          className={styles.input} />
      </label>
      <canvas ref={canvasRef} className={styles.canvas} />
      <button onClick={downloadMeme} className={styles.btn}>Download</button>
    </div>
  );
}

jest.mock('file-saver', () => ({
  saveAs: jest.fn(),
}));

function save_json(){
    var name = get_name();

    var blob = new Blob([JSON.stringify(CK.data.getJson())], {type: "text/plain;charset=utf-8"});

    saveAs(blob, name + ".json");
}

export function downloadExcel(data, filename) {
  const buf = Buffer.from(data, 'binary')
  const b = new Blob([buf], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  })
  saveAs(b, filename)
}

MultipleReplaces = () => {
    
    const [jsonfiles,    setJsonfiles]    = useState([]);
    const [numReplaces,  setNumReplaces]  = useState(null);
    const [operation,    setOperation]    = useState('equal');
    const [path,         setPath]         = useState('');
    const [replaceValue, setReplaceValue] = useState('');
    const [currentValue, setCurrentValue] = useState('');
    
    const replace = () => {

        let res = replaceMultipleJSONs(path, currentValue, replaceValue, jsonfiles, operation);

        setJsonfiles(res[0]);
        setNumReplaces(res[1]);
        
    }

    const download = () => {

        jsonfiles.forEach(({name, json}) => {
    
            let fileName = name;
    
            let fileToSave = new Blob([JSON.stringify(json, null, 2)], {
                type: 'application/json',
                name: fileName
            });
            
            saveAs(fileToSave, fileName);
    
        });       
    
    }

    return(
        <div className = 'Multiple'>
            <h2>Replace multiple properties in JSON files at once</h2>
            <p>Select your files (they won't be uploaded to any server), they remain in your browser.</p>
            <UploadFiles
                jsonfiles    = {jsonfiles}
                setJsonfiles = {setJsonfiles}
            />
            { jsonfiles.length > 0
            ? <React.Fragment>
                <h2>Rules</h2>
                <div className = 'Replace'>
                    <span>If</span>
                    <input placeholder = 'property.subproperty' onChange = {e => setPath(e.target.value)} value = {path}/>
                    <div className = 'Selector'>
                        <select value = {operation} onChange = {(e) => setOperation(e.target.value)}>
                            <option value = 'equal'>is equal to</option>
                            <option value = 'greater'>is greater than</option>
                            <option value = 'greater'>is lesser than</option>
                        </select>
                        <TriangleDownIcon/>
                    </div>
                    <input placeholder = 'value' onChange = {e => setCurrentValue(e.target.value)} value = {currentValue}/>
                    <span>replace with</span>
                    <input placeholder = 'new value' onChange = {e => setReplaceValue(e.target.value)} value = {replaceValue}/>
                </div>
                <div className = 'Actions'>
                    <button onClick = {replace}  disabled = {!path || !currentValue || !replaceValue}>Replace</button>
                    <button onClick = {download} disabled = {false}><DownloadIcon/>Download all files</button>  
                </div>
                <div className = 'Alerts'>
                    <div>{numReplaces !== null ? `${numReplaces} fields replaced` : null}</div>                                      
                </div>
              </React.Fragment>
            : null
            }
        </div>
    );
    
}