我一直在尝试利用PapaParse的工作人员选项 (http://papaparse.com/#worker)与Vue的webpack模板(https://github.com/vuejs-templates/webpack)但我遇到了问题:
未捕获的ReferenceError:窗口不是#defined
所以我认为它需要将文件与bundle文件分开,所以我使用了像https://github.com/danderson00/webpack-worker之类的依赖项并将其设置为从worker文件初始化Worker类。但我得到了同样的错误,我不明白为什么。
这是我的作品
Vue文件:
import axios from 'axios'
import client from 'webpack-worker/client'
import squel from 'squel'
import FileSaver from 'filesaver.js'
export default {
name: 'Country',
data () {
return {
downloading: true,
dl_progress: 0,
parsing: false,
processing: false,
data: null,
ipv4: [],
meta: [],
dict: {},
selected_country: []
}
},
mounted () {
// Unfortunately, MaxMind site has no cross-origin header, so we are unable to download directly
axios.get(require('../../assets/archive/GeoLite2-Country-CSV.zip'), {
responseType: 'blob', // JSZIP only takes in binary data, so we set the response as blob (binary)
onDownloadProgress: (progressEvent) => {
this.dl_progress = Math.round((event.loaded * 100) / event.total)
}
})
.then((response) => {
this.progress = 100
this.downloading = false
this.parsing = true
this.data = response.data
this.parse()
})
},
methods: {
parse () {
client(new Worker('country.js'), {
data: this.data
})
.subscribe(progress => {
console.log(progress)
})
.then(result => {
console.log('got result')
})
},
process () {
let out = []
this.ipv4.forEach((block) => {
if (this.selected_country.includes(block.registered_country_geoname_id)) {
out.push({cidr: block.network, comment: this.dict[block.registered_country_geoname_id]})
}
})
let SQL = squel
.insert()
.into('cidr_list')
.setFieldsRows(out)
.toString()
let blob = new Blob([SQL], {type: 'application/sql;charset=utf-8'})
FileSaver.saveAs(blob, 'country.sql')
this.$toast.open({
message: 'Successfully downloaded country import file',
type: 'is-success'
})
}
}
}
工人档案:
import process from 'webpack-worker/process'
import Papa from 'papaparse'
import JSZip from 'jszip'
import _ from 'lodash'
process((params, emit) => {
emit(0)
let zip = new JSZip()
zip.loadAsync(params.data)
.then((zipContent) => {
zip.file('GeoLite2-Country-CSV_20171003/GeoLite2-Country-Blocks-IPv4.csv')
.async('string')
.then(data => {
emit(25)
Papa.parse(data, {
header: true,
complete: ipv4 => {
emit(50)
zip.file('GeoLite2-Country-CSV_20171003/GeoLite2-Country-Locations-en.csv')
.async('string')
.then(data => {
emit(75)
Papa.parse(data, {
header: true,
complete: meta => {
emit(100)
let dict = {}
meta.data.forEach(geo => {
dict[geo.geoname_id] = geo.country_name
})
return {
ipv4: ipv4.data,
meta: _.sortBy(meta.data, 'country_name'),
dict: dict
}
}
})
})
}
})
})
})
})
答案 0 :(得分:0)
使用worker-loader
并为工作文件设置规则解决了我的问题。