robbederks / downzip

NPM library to enable client-side code to stream potentially large files into a zipped download
MIT License
35 stars 12 forks source link

No luck getting this to work with svelte-kit #39

Closed rjwalters closed 1 year ago

rjwalters commented 1 year ago

I used rollup-plugin-copy as in the readme example.

(vite.config.js)

import copy from 'rollup-plugin-copy';
const config: UserConfig = {
  plugins: [
    copy({
      targets: [
        {
          src: 'node_modules/downzip/dist/downzip-sw.js',
          dest: './static',
        },
      ],
    }),
    sveltekit(),
  ],
};

I attempted to load and use the module like this:

(svelte component)

  // @ts-ignore
  import DownZip from 'downzip';
  import { onMount } from 'svelte';

  let downZip: any;
  onMount(async () => {
    // Setup downzip object
    downZip = new DownZip();
    await downZip.register();
  });

  let downloadId: number = 0;
  async function downloadAll( fileArray: files[] ) {
      // Initialize download
      let zipFileName = `downzip.${content.id}.zip`;
      const files = fileArray.map((f) => {
        return {
          name: f.name,
          downloadUrl: f.file_url,
          size: f.size_bytes,
        };
      });
      console.log(downZip);
      const url = await downZip.downzip(
        `downZip-${downloadId}`,
        zipFileName,
        files
      );
      downloadURL(url, zipFileName);
      downloadId += 1;
  }

image

rjwalters commented 1 year ago

I think the problem here was that I still wasn't providing the correct location for the worker script.

I managed to get it working like this:

import { page } from '$app/stores';
onMount(async () => {
  // Setup downzip object
  downZip = new DownZip();

  const mapScriptUrl = (_: string) => {
    return `${$page.url.protocol}//${$page.url.host}/downzip-sw.js`;
  };
  await downZip.register({
    mapScriptUrl,
  });
});
rjwalters commented 1 year ago

I needed to change things up again to get it to run with adapter-node:

  onMount(async () => {
    // @ts-ignore
    let downzipModule = await import('downzip');
    let downZip = new downzipModule.default();
    const mapScriptUrl = (_: string) => {
      return `${$page.url.protocol}//${$page.url.host}/downzip-sw.js`;
    };
    await downZip.register({
      mapScriptUrl,
    });
  });