某溯源平台：vue生成二维码压缩包下载(二)

项目还需要下载二维码打印，依赖两个包：
1.jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，
2.工作需要通过 JavaScript 保存文件到本地，我们都知道 JavaScript 基于安全的考虑，是不允许直接操作本地文件的。IE 可以通过 VB 插件的方式进行，而 Chrome 和 firefox 都不支持 JavaScript 向本地写入文件，所以 VB 插件的方式存在兼容性问题。那有没有适合的方法呢？答案是肯定的，我们可以通过 FileSaver.js 这个小插件实现我们的需求。

import JSZip from 'jszip'
import FileSaver from 'file-saver'

这里需要先处理我的数据，选中的对象才要下载：

 在data中声明  downcheckArr: []
// 遍历对象traversalObject(obj) {for (var item in obj) {if (obj[item].checked) { this.downcheckArr.push(obj[item].traceCode) } // 显示URL的值if (Object.prototype.toString.call(obj[item]) === '[object Array]' || Object.prototype.toString.call(obj[item]) === '[object Object]') {this.traversalObject(obj[item]); // 递归遍历}}},

之后打成下载包

downloadZip() {this.downcheckArr.length = 0;this.traversalObject(this.qrCodeGroup)//  下载所需数据筛选const img_list =this.downCodeGroup.filter((item) => this.downcheckArr.indexOf(Number(item.traceCode)) > -1)const blogTitle = '溯源平台' // 下载的文件夹名称const zip = new JSZip()const imgs = zip.folder(blogTitle)const baseList = []for (let i = 0; i < img_list.length; i++) {const name = img_list[i].traceCode// 每张图片的名称const image = new Image()// 解决跨域 Canvas 污染问题image.setAttribute('crossOrigin', 'anonymous')image.onload = function () {const canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightconst context = canvas.getContext('2d')context.drawImage(image, 0, 0, image.width, image.height)const url = canvas.toDataURL() // 得到图片的base64编码数据 let url =canvas.toDataURL('image/png')baseList.push({ name: name, img: url.substring(22) })if (baseList.length === img_list.length) {if (baseList.length > 0) {for (let k = 0; k < baseList.length; k++) {imgs.file(baseList[k].name + '.png', baseList[k].img, {base64: true})}zip.generateAsync({ type: 'blob' }).then(function (content) {FileSaver.saveAs(content, blogTitle + '.zip')})}}}image.src = img_list[i].traceCodeUrl}}

某溯源平台：vue生成二维码压缩包下载(二)相关推荐

vue生成二维码并下载二维码
首先安装一下面这个插件 cnpm install vue-qr -S 接下来在需要生产并下载二维码的页面引入 import VueQr from 'vue-qr' 并在components中注册为组件 ...
PHP -----微擎内置方法生成二维码和下载二维码
1.新建一个类文件code.php,主要用于处理二维码的方法: 在页面的顶部引用: load()->library('qrcode'); class code{//方法写在这 } 2.生成二维 ...
vue-qr 二维码添加logo 下载单个二维码批量下载二维码并打包
使用 vue-qr 生成二维码并可以添加logo 逻辑: 1.下载二维码生成插件这里用的是qrcode 2.下载二维码使用html2canvas(其实解释一个截图工具)将标签截图并下载下来 3. ...
点击识别元素位置、生成显示二维码、下载二维码
百度网盘地址效果: 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">& ...
react二维码qrcode.react以及点击二维码的下载二维码图片
npm install qrcode.react 参考文档程序如下, const QRCode = require('qrcode.react'); export default class Pro ...
vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴
近日,重构项目某一老模块时,有一个功能是生成二维码并下载,还可以复制链接.列表每项都有二维码.下载二维码和复制链接和列表上方总的二维码. 老模块是用的qrocode中文文档,qrcode github ...
实现简单的二维码批量下载功能
二维码批量下载二维码容器隐藏 <divid="code-box"ref="qrCodeDiv"style="position: absolu ...
vue生成二维码并下载
vue生成二维码图片,这里使用的是qrcode.js 这个插件 1.下载插件 npm install --save qrcodejs2 2.组件内使用 <template> <B ...
通过web系统实现淘宝营销引流，小说或者视频上传之后自动生成二维码，通过二维码分享之后引入微信或者扣扣加群，群满自动切换到下一个，以及数据统计分析和若干个小工具集成
通过web系统实现淘宝营销引流,小说或者视频上传之后自动生成二维码,通过二维码分享之后引入微信或者扣扣加群,群满自动切换到下一个,以及数据统计分析和若干个小工具集成. 主要实现技术: 1.大文件视频分 ...

某溯源平台：vue生成二维码压缩包下载(二)

某溯源平台：vue生成二维码压缩包下载(二)相关推荐

最新文章

热门文章