wang_zhiwei0728-优快云博客

最近使用highcharts做了一个图，但是导出图片功能没有网络不能使用，所以自己写了一个，记录一下。一：首先要下载html2Canvas 插件，然后在页面引入。import html2Canvas from "html2canvas"二：html <div id="pdfDom"> <div class="contentFooter" ref="getAttuEchart"></div> </div>

2022-02-14 16:52:32 1617

转载前端导出table表格为CSV

纯前端将表格数据导出excel导出xlsx格式的excel文件方法封装方法调用导出csv格式的excel表格方法封装方法调用导出xlsx格式的excel文件方法封装对表头及表格数据分别进行循环获取/** * * @param jsonData 接口返回数据 * @param nameList 标题表头数据（非必填） * @param keyList 与表头相对应取值参数名（非必填） */export function downl

2022-01-07 15:23:57 464

原创 vue取消接口请求CancelToken

因业务需求，需要请求多次同一接口，需要在请求接口时，取消上个未完成的接口请求解决方案一：统一封装1. 可以利用CancelToken工厂函数创建cancel token 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 const Canc...

2021-12-27 14:21:26 3047

原创 Vue根据后台返回下班动态生成Echarts图的数量

<template> <div class="task"> <div class="Munleft"> <div v-for="(item, index) in chartList" :key="item.id"> <div style="width: 100%; height: 100%" class="echartsList" :id="`chart.

2021-12-20 17:01:26 274

原创 VUEcanvas内容转成base64流

npm install --save html2canvasimport html2Canvas from "html2canvas"; html2Canvas(document.getElementById("container")).then(function (canvas) { let pageData = canvas.toDataURL("image/jpeg", 1.0); console.log(pageData) });

2021-12-20 16:30:46 524

原创 Vue使用highcharts

一：先安装依赖npm install highcharts-vue二：在min.js里全局导入配置import Vue from 'vue'import HighchartsVue from 'highcharts-vue'//接下来，您可以将其注册为 Vue 对象中的插件：Vue.use(HighchartsVue)三：在页面引入依赖import Highcharts from "highcharts/highstock";import loadExporting f

2021-12-17 15:41:47 2307 2

转载 Vue页面导出PDF

通过网上的查阅以后,说一下思路.就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..看了他们的文章,做了如下整理..说起来很容易,那么具体怎么实现呢?1 、我们要添加两个模块第一个.将页面html转换成图片npm install --save html2canvas 第二个.将图片生成pdfnpm install jspdf --save2、定义全局函数..创建一个htmlToPdf.js文件在指定位置// 导出页面为PDF格式import html2Ca

2021-12-16 17:59:47 273

原创 VUE导出csv百万条数据。

先下载引入插件import Papa from "papaparse";请求接口要写上responseType: 'blob', export function DataExport(data) { return request({ url: 'data/export', responseType: 'blob', method: 'post', data:data }) }方法exportCsv() {...

2021-12-13 11:54:57 656

原创 Vue数组对象去重

TreeList({ parentId: this.chuanshu }).then((res) => { let arr1 = this.unique(res.rows.map((item) => { return item; }) ); this.checkboxList = arr1; }); unique(arr) { const res = new Map(); ...

2021-11-22 09:05:47 494

原创时间选择器的val值转换

<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"> </el-date-picker>value-format="yyyy-MM-dd HH:mm:ss"...

2021-11-15 11:13:41 825

原创 VUE+antv/x6实现拖拽自定义流程图

最近公司需要做一个流程图，看了看antv/X6感觉挺合适，就研究了半个月。网上也没什么资料，又怕自己忘，就自己记录一下用到得一些事件方法，方便以后再用到可以查阅。一：实现流程图最重要得就是画布了，官网上都有文档可以轻松实现画布。下面放一下我用VUE写得画布代码。首先最重要得就是下载依赖了， x6在vue中下载得话需要下载两个依赖；npm install @antv/x6 --savenpm install @antv/x6-vue-shape把这两个依赖下载好就可以在vue中使用X6了

2021-10-26 16:02:24 14087 33

原创 vue定义一个带年月日得时间表

<template> <div>{{ dataTime }}</div></template>export default { data() { return { dataTime: "", timer: "",}} mounted钩子函数里把方法给先调用一下。 mounted() { this.timer = setInterval(() => { ..

2021-10-12 10:35:43 546

原创 vue替换后台数据字段的值

一：后台给的数据中经常会给反一个值，0-4这样的数字。我们需要替换成一个状态，如成功失败进行中这样的字。auditStatus: 2 //需要替换成汉字的字段createTime: "2021-09-07"id: 9849name: "airport_999"propName: "机场"source: "某数据集"typeName: "机场"① 获取到后台接口数据以后先用map遍历一下整条数据，然后自定义一个数组，把后台给的值对应设置文字就可以了。单条数据就可以免除map了..

2021-10-11 17:43:12 1882

原创 vue2使用x2js解析.xml数据。

一：这是一个.xml地址，需要解析这个地址.可以使用x2js来解析。①npm安装npm i x2js② 在文件里引用<script>import X2JS from "x2js";const x2js = new X2JS();</script>③获取到接口数据后在接口里使用方法来解析.xml文件 const xmlContent = x2js.xml2js(res.data[0].contents); ...

2021-10-11 16:39:13 1744

原创 img标签得onerror事件

有时，img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，这样让人很不爽，如何变得美观些呢？可以借用img标签的onerror事件，img标签支持onerror事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下：　<img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">　当图.

2021-10-08 08:55:53 2201

原创 vue+elementUi做的一个带输入建议的input框

异步获取搜索返回的数据

2021-09-29 14:34:58 1331

原创自定义滚动条样式

在正常项目中需要用到overflow:auto 这个功能, 但是浏览器自带的滚动条样式太丑了.下面我们就自定义一个.::-webkit-scrollbar { width: 6px; height: 6px; background: transparent;}::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px;}:hover::-webkit-scrollbar-thumb {...

2021-09-29 14:20:45 58

转载 ElementUi Carousel 走马灯，自定义el-carousel箭头左右切换

需求是我自己要自定义左右切换的箭头图片，每个页面里面显示6组数据。二上代码:autoplay="false" 不需要自动轮播arrow="never" 不需要自带的箭头indicator-position="none" 不需要底部的指示器重点在于 ref=“cardShow”调用方法————————————————版权声明：本文为优快云博主「sunnyboysix」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://bl..

2021-09-29 14:18:51 2167

wang_zhiwei0728的博客

原创 vue3监听某个dom元素宽高变化

原创 vue3监听dom元素变化

原创 js数组对象去重

原创 vue通过后端返回的流生成word文件

原创 vue递归深拷贝

原创 el-table切换分页后保持勾选状态不变

原创 VUE流动布局，手动调整位置

原创 ES6 类的使用

原创 vue使用防抖与节流

原创 js把一个数组里面的值每两个分成一组。

原创 vue-pubilc-layer

原创 vue+element ui写级联选择器异步获取数据

原创前端导出图片到本地