大佬，为何在开发的时候可以下载打包图片，打包后就没法下载了呢？

[hackhase]

大佬，我想把网页上的图片批量打包成zip后下载，在开发模式下，没有任何问题，但是打包后，却没法下载！
模块用了jszip和file-saver。
`const getFile = (url) => {
return new Promise((resolve, reject) => {
//通过请求获取文件blob格式
let xmlhttp = new XMLHttpRequest()
xmlhttp.open('GET', url, true)
xmlhttp.responseType = 'blob'
xmlhttp.onload = function () {
if (this.status == 200) {
resolve(this.response)
} else {
reject(this.status)
}
}
xmlhttp.send()
})
}

const downFile = async (arrList) => {
// console.log(arrList)
const zip = new JSZip()
const cache = {}
const promises = []
await arrList.forEach((item) => {
const promise = getFile(item.src).then((data) => {
// 下载文件, 并存成ArrayBuffer对象
const lst = item.src.split('.')
const fileType = lst[lst.length - 1]
// console.log(fileType)
zip.file(Date.now() + '.' + fileType, data, { binary: true }) // 逐个添加文件
cache[item.fileName] = data
})
promises.push(promise)
})
Promise.all(promises).then(() => {
zip.generateAsync({ type: 'blob' }).then((content) => {
// 生成二进制流
// FileSaver.saveAs(content, '模板下载.zip') // 利用file-saver保存文件
// console.log(content)
downLoad(content, '模板下载','zip')
})
})
}
const downLoad = (blob, name, type) => {
if (!blob || !type) return
// const blob = new Blob([buffer], {
// type: 'application/arraybuffer',
// })
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL
// 创建下载链接
const downloadHref = url.createObjectURL(blob)
// 创建a标签并为其添加属性
const link = document.createElement('a')
link.href = downloadHref
link.download = ${name || '导出文件'}.${type}
// 触发点击事件执行下载
document.body.appendChild(link)
link.click()
// 下载完成就删掉a标签
document.body.removeChild(link)
//释放blob对象
url.revokeObjectURL(downloadHref)
}`
上面改成a标签下载，还是不行，我自己看了下好像在zip.generateAsync这里的content一直打印不出来，有空帮忙看看啊！谢谢

[hackhase]

jszip 无法在油猴环境下加载，你需要在正常 window 下加载

#100

大佬，按您的方法我设置了下，为何还是提示Uncaught (in promise) ReferenceError: jszip is not defined
const epubjs_code =
import { unsafeWindow } from '$';
const importScript = (src) => {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.addEventListener('load', () => {
resolve();
script.parentElement?.removeChild(script);
});
script.addEventListener('error', (e) => {
reject(e);
script.parentElement?.removeChild(script);
});
document.body.appendChild(script);
});
};
await importScript(
'https://cdn.jsdelivr.net/npm/jszip@${jszipPkg.version}/dist/jszip.min.js'
);
export default unsafeWindow?.jszip;
.trim()
plugins: [ { name: 'script:jszip', enforce: 'pre', apply: 'build', resolveId(source, importer, options) { if (source == 'jszip') return \0jszip}, load(id, options) { if (id ==\0jszip) { return epubjs_code } }, }, vue(), monkey({ entry: 'src/main.js', userscript: { icon: 'http://pubimage.360doc.com/index7/nlogo.jpg', name: '🔥🔥360图书馆文件内容图片一键复制下载🔥🔥', version: '2.0.4', author: 'hackhase', license: 'MIT', description: '360图书馆文件内容复制到剪贴板，支持一键下载文章里面的图片', namespace: 'https://www.softrr.cn/', connect: 'www.softrr.cn', grant: ['unsafeWindow', 'GM_xmlhttpRequest', 'GM_setClipboard'], match: ['http://www.360doc.com/content/*'], }, build: { externalGlobals: { vue: cdn .jsdelivr('Vue', 'dist/vue.global.prod.js') .concat(util.dataUrl(';window.Vue=Vue;')), 'element-plus': cdn.jsdelivr('ElementPlus', 'dist/index.full.min.js'), 'jszip':cdn.jsdelivr('jszip', 'dist/jszip.min.js'), 'file-saver': cdn.jsdelivr('file-saver', 'dist/FileSaver.min.js'), // axios: cdn.jsdelivr('axios', 'dist/axios.min.js'), }, externalResource: { 'element-plus/dist/index.css': cdn.jsdelivr(), }, }, }),

[hackhase]

jszip 无法在油猴环境下加载，你需要在正常 window 下加载

#100

大佬能帮忙看下的代码吗？

[lisonge]

你好，我使用如下代码，能够打包后正常使用，并没有发现异常

// vite.config.ts
import { defineConfig } from 'vite';
import monkey, { cdn } from 'vite-plugin-monkey';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        monkey({
            entry: 'src/main.ts',
            userscript: {
                icon: 'https://vitejs.dev/logo.svg',
                namespace: 'npm/vite-plugin-monkey',
                match: ['https://songe.li/'],
            },
            build: {
                externalGlobals: {
                    jszip: cdn.jsdelivrFastly('JSZip', 'dist/jszip.min.js'),
                },
            },
        }),
    ],
});

// main.ts
import JSZip from 'jszip';
import { saveAs } from 'file-saver';

const zip = new JSZip();

zip.file('hello.txt', 'Hello World\n');
zip.file('hello2.txt', 'Hello World\n');
zip.file('test.bin', Uint8Array.from([0x00, 0x01, 0x02, 0x03]));

const content = await zip.generateAsync({ type: 'blob' });

saveAs(content, `test-${Date.now()}.zip`);

[hackhase]

我用那个100#的直接复制粘贴，修改后，后来可以了，谢谢大佬！
按上面的方法，我试过的，就是不行