• 当前频道:程序开发

程序开发 Vue项目导入导出csv文件

导出 安装vue插件papaparse yarn add papaparse 插件使用 首先,导出的数据一定得是一个列表,一个对象列表,例如: itemList: [ { name: '红木', type: 'P000001', price: '¥88888' }, { name: '水杉', type: 'P000002', price: '¥2000' } ] 写一个按钮,点击按钮的时候把数据导出csv文件: <a-button type="primary" @click="exportCsv()">导出指令</a-button> 点击按钮调用 exportCsv 方法,首先在script里面引用一下库 import Papa from 'papaparse' 接下来是 exportCsv 方法的实现: /** * by wjw * 导出指令csv文件 */ exportCsv () { var csv = Papa.unparse(this.itemList) // 定义文件内容,类型必须为Blob 否则createObjectURL会报错 const content = new Blob([csv]) // 生成url对象 const urlObject = window.URL || window.webkitURL || window const url = urlObject.createObjectURL(content) // 生成<a></a>DOM元素 const el = document.createElement('a') // 链接赋值 el.href = url el.download = '文件导出.csv' // 必须点击否则不会下载 el.click() // 移除链接释放资源 urlObject.revokeObjectURL(url) } 可以了。这样的话点击按钮之后就可以将数据转成csv文件导出到本地。但是记住哈,数据一定要符合格式,每条数据都是一样的。 vue 导出cvs文件https://blog.csdn.net/mmorss/article/details/82586743 导入 首先一样,写一个上传文件的按钮,点击打开文件上传对话框,选择csv文件那种。 <input type="file" id="files" ref="refFile" v-on:change="importCsv"> 当上传了文件调用 importCsv 方法,这个方法是上传csv文件之后的处理方法,逻辑根据需要自己写。 /** * by 王佳伟 * 2020年6月17日08:42:11 */ importCsv () { let selectedFile = null selectedFile = this.$refs.refFile.files[0] if (selectedFile === undefined) { return } var reader = new FileReader() reader.readAsDataURL(selectedFile) reader.onload = (evt) => { // 检查编码 // let encoding = this.checkEncoding(evt.target.result); // 将csv转换成二维数组 Papa.parse(selectedFile, { encoding: 'ANSI', complete: (res)

2020-09-24 10:23:12 12 0 0
阅读详情

程序开发 利用canvas进行图片压缩

<input type="file" name="file" id="upload"> <script> const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg'] const MAXSIZE = 3 * 1024 * 1024 const MAXSIZE_STR = '3MB' function converImageToBase64(file, callback){ let reader = new FileReader(); reader.addEventListener('load', function(e){ const base64Image = e.target.result callback && callback(base64Image); reader = null; }) reader.readAsDataURL(file); } function compress(base64Image, callback){ let maxW = 1024 let maxH = 1024 const image = new Image() image.addEventListener('load', function(e){ let ratio; // 图片压缩比 let needCompress = false; // 是否需要压缩 if(maxW < image.naturalWidth){ needCompress = true; ratio = image.naturalWidth / maxW maxH = image.naturalHeight / ratio; } if(maxH < image.naturalHeight) { needCompress = true; ratio = image.naturalHeight / maxH maxW = image.naturalWidth / ratio } // 不需要压缩 if(!needCompress) { maxW = image.naturalWidth maxH = image.naturalHeight } const canvas = document.createElement('canvas') canvas.setAttribute('id', '__compress__') canvas.width = maxW; canvas.height = maxH; canvas.style.visibility = 'visible' document.body.appendChild(canvas) const ctx = canvas.getContext('2d') ctx.clearRect(0,0, maxW, maxH); ctx.drawImage(image, 0, 0, maxW, maxH); const compressImage = canvas.toDataURL('image/jpeg', 0.8); callback && callback(compressImage) canvas.remove(); }) image.src = base64Image

2020-07-14 19:18:51 157 0 0
阅读详情

程序开发 Vue.js中provide/inject实现响应式数据更新方案

provide() { return { tb: () => this.data }; }, inject: ["tb"], computed: { list() { return this.tb(); } }, watch: { list: { deep: true, handler(e) { console.log("watch", e); } } }, 方案来自:Vue.js中provide/inject实现响应式数据更新

2020-06-18 17:14:10 339 0 0
阅读详情

程序开发 vue项目在IE11中显示 Access-Control-Allow-Headers 列表中不存在请求标头 authorization

IE提示: Access-Control-Allow-Headers 列表中不存在请求标头 authorization。 但在Chrome中是正常的,看ie到network也是有的 感谢 然后去远足 提供的解决方案: 标头其实是大小写敏感的,让后端在返回值里再加个 Authorization,已有的小写的也别删。 然后就是注意 Access-Control-Allow-Headers 里面的值中不能有空格,可以在Access-Control-Allow-Headers的值那里右键复制值,然后在其他地方粘贴看看是否有空格

2020-04-28 10:32:49 910 0 1
阅读详情

程序开发 一段css让全站变灰

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼,国务院发布公告,决定2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使馆下半旗致哀,全国停止公共娱乐活动,4月4日10点开始,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。 想到以往默哀日访问网站时发现整站会变成全灰,即想到如果立即开始开发、设计图修改等工作也会消耗大量的时间与精力,那会不会有css可以直接处理所有的元素将他们变灰,随即想到了css3的filter(滤镜),并也证实了这一想法的可行性。 解决方案1 html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } 解决方案2 非全站变灰我们可以将需要使用filter的元素单独加上 <html> <body> <div class="gray-filter"></div> </body> </html> <style> .fixed { position: fixed; top: 100px; left: 100px; height: 100px; width: 100px; background-color: #f00; } .gray-filter { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } </style> 兼容IE的办法 很多小伙伴评论说IE低版本不支持该怎么办于是我Google搜索了一下是有实现办法的 实现办法是引入grayscale.js,Demo下载 grayscale.js Demo 简单查看了该js的源码后发现会将color、background-color、borderColor等属性提取出来后替换成灰色,background-image和图片会使用canvas绘制处理成灰色再替换成处理后的图片源 demo内functions.js则是对判断浏览器userAgent来识别浏览器类型与版本,做出对应的处理 参考资料与demo来源 小程序下的问题 微信小程序我尝试加在page上但是fixed还是失效了,只能使用第二种方法去加样式,大家如果有解决方案可以评论提出来大家一起讨论一下~ 作者:tiutiu链接:https://juejin.im/post/5e86e221e51d4546ce27b99c来源:掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2020-04-04 14:59:40 210 0 1
阅读详情

程序开发 Python的switch替换方案、列表推导式、字典推导式

switch替换方案 day = 8 def get_sunday(): return 'Sunday' def get_monday(): return 'Monday' def get_tuesday(): return 'Tuesday' def get_default(): return 'Unkown' switcher = { 0: get_sunday, 1: get_monday, 2: get_tuesday } day_name = switcher.get(day, get_default)() print(day_name) 列表推导式 # 列表推导式 # 集合推导式 # set 也可以被推导 # dict a = [1,2,3,4,5,6,7,8] aa = {1,2,3,4,5,6,7,8} aaa = (1,2,3,4,5,6,7,8) b = [i**2 for i in a] c = [i**2 for i in a if i >= 5] print(b) print(c) bb = {i**2 for i in aa} bbb = [i**2 for i in aaa] print(bb) print(bbb) 字典推导式 students = { '张三': 18, '李四': 22, '王五': 16 } b = [key for key,value in students.items()] bb = {value:key for key,value in students.items()} print(b) # ['张三', '李四', '王五'] print(bb) # {18: '张三', 22: '李四', 16: '王五'} # 不推荐元组 c = (key for key,value in students.items()) for x in c: print(x)

2020-02-19 23:37:28 232 0 1
阅读详情

程序开发 Vue History模式下微信支付授权目录的填写,处理URL未注册

调起微信sdk支付时弹出url未注册问题, 微信开发者平台配置url: 访问url:http://www.baidu.com/pay/ment 支付授权目录:http://www.baidu.com/pay/ 访问url:http://www.baidu.com/pay 支付授权目录:http://www.baidu.com/ 访问url:http://www.baidu.com/pay/ment?id=123 支付授权目录:http://www.baidu.com/pay/ 文章来自:vue history模式下的微信支付,及微信支付授权目录的填写,处理URL未注册

2020-01-13 22:50:05 354 0 0
阅读详情

程序开发 封装vue微信公众号分享方法,兼容iOS

上篇文章说到 vue的jssdk授权方案 ,这篇中使用的上篇的方法授权。 分享个公众号分享引到图片 这里设置一个公共方法: /** * 分享 * @param {Object} data 分享内容 title 分享标题 thumb分享图片 content 分享描述 * @param {String} fullPath 分享路径 通过 this.$route.fullPath 获取传入 */ export function share(data, fullPath) { // 设置自定义分享 ready(["updateTimelineShareData", "updateAppMessageShareData"]).then(_ => { wx.updateTimelineShareData({ title: data.title, // 分享标题 link: window.location.protocol + '//' + window.location.host + fullPath, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: data.thumb, // 分享图标 success: function () { // 设置成功 } }); wx.updateAppMessageShareData({ title: data.title, // 分享标题 desc: data.content, // 分享描述 link: window.location.protocol + '//' + window.location.host + fullPath, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: data.thumb, // 分享图标 success: function () { // 设置成功 } }); }); } 使用     share({title: '分享标题', content: '分享描述', thumb: '分享图片'}, this.$route.fullPath)

2019-12-16 23:56:56 473 0 0
阅读详情

程序开发 解决vue的history模式微信jssdk授权认证在ios上失败问题

本篇方案适用于vue 的 history模式,hash模式不适用! 使用spa模式的vue的 history 路由模式,在ios上加载微信jssdk授权认证出现失败问题。由于ios只记录第一次进来的url,在其他页面调用config授权不能使用window.location.href 做为认证url。 需要做的是如果在ios下,记录第一次进来时的url,调用config时用储存好的url调用 首先在 router 中添加 afterEach import { config } from './utils/wx'; router.afterEach((to, from) => { // 伸手党福利 // window.__wxjs_is_wkwebview // true 时 为 IOS 设备 // false时 为 安卓 设备 安卓默认使用to.fullPath let url = to.fullPath if (window.__wxjs_is_wkwebview) { // IOS // 第一次进来记录url window.entryUrl 自定义window对象 if (window.entryUrl == '' || window.entryUrl == undefined) { window.entryUrl = to.fullPath // 将后面的参数去除 url = to.fullPath }else { // 后续进来直接使用第一次保存的url url = window.entryUrl } } config(url) // 封装的微信config方法 传入url }) // ./utils/wx.js import { config as configWeChat } from '@/api/WeChat' // 后端接口 import { getToken } from './auth' import { Toast } from 'vant' /** * 通过config接口注入权限验证配置 接受url */ export function config(url) { return new Promise(async (res, rej) => { // 接口请求获取config签名数据 const { data } = await configWeChat({ token: getToken(), url: window.location.protocol + '//' + window.location.host + url // 获取协议 + '//' + 网站域名 + 传入域名 拼接成完整url }) wx.config({ debug: false, appId: data.appId, // 必填,公众号的唯一标识 timestamp: data.timestamp,

2019-12-14 23:31:08 726 0 0
阅读详情

程序开发 在ts中axios返回not exist on type 'AxiosResponse'

vue的axios请求返回值调取时报下面这错误 Property 'content' does not exist on type 'AxiosResponse<any>'.Vetur(2339) 解决方法是新增一个 axios.d.ts 文件,内容如下 import * as axios from 'axios' declare module 'axios' { interface AxiosInstance { (config: AxiosRequestConfig): Promise<any> } } 就可以解决了 方案来自 https://github.com/axios/axios/issues/1510#issuecomment-529284409

2019-12-12 15:33:05 2752 0 0
阅读详情

程序开发 yarn upgrade 更新依赖包

更新依赖包时yarn.lock、package.json同步更新版本信息 yarn upgrade-interactive --latest // 需要手动选择升级的依赖包,按空格键选择,a 键切换所有,i 键反选选择

2019-11-12 10:36:21 3333 0 0
阅读详情
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 18
前往