工作中遇到问题的解决方案
- css绑定js变量
<template><div class="name">siqi</div> </template><script setup> import { ref } from "vue" const str = ref('#000') </script> <style scoped lang="scss"> .name { background-color: v-bind(str); // JS 中的色值变量 #000 就赋值到这来了 } </style>
- svg、png图片下载
echarts图表下载svg格式的图片
const ExportSvg = (instance: any) => { let picInfo = instance.getDataURL({ type: 'svg', backgroundColor: '#fff', }); const elink = document.createElement('a'); elink.download = 'figure'; elink.href = picInfo; document.body.appendChild(elink); elink.click(); URL.revokeObjectURL(elink.href); document.body.removeChild(elink); };
echarts图表下载png格式的图片
const ExportPng = (instance: any) => { let img = new Image(); img.src = instance.getDataURL({ type: 'png', pixelRatio: 1, backgroundColor: '#fff', }); img.onload = () => { let canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; let ctx: any = canvas.getContext('2d'); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); let dataURL = canvas.toDataURL('image/png'); let a = document.createElement('a'); let event = new MouseEvent('click'); a.download = 'figure'; a.href = dataURL; a.dispatchEvent(event); }; };
d3图表下载png
const ExportPngWithD3Pic = (svg: any, type?: any) => { let serializer = new XMLSerializer(); let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svg); let image = new Image(); image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source); let canvas = document.createElement('canvas'); canvas.width = svg.clientWidth; canvas.height = svg.clientHeight; let context: any = canvas.getContext('2d'); context.fillStyle = '#fff'; context.fillRect(0, 0, canvas.width, canvas.height); image.onload = function () { context.drawImage(image, 0, 0); let a = document.createElement('a'); a.download = 'figure'; a.href = canvas.toDataURL(image/${type}); a.click(); }; };
d3图表下载svg
const ExportSvgWithD3Pic = (svg: any) => { let svgAsXML = new XMLSerializer().serializeToString(svg); let dataURL = 'data:image/svg+xml,' + encodeURIComponent(svgAsXML); var a = document.createElement('a'); document.body.appendChild(a); // This line makes it work in Firefox. a.setAttribute('href', dataURL); a.setAttribute('download', 'figure.svg'); a.click(); };
3.CSS设置背景图片
- svg图片无法撑满整个容器
backgroud: url('xxx') no-repeat;
background-size: contain;
// svg图片需要设置属性:
preserveAspectRatio="none meet" width="100%" height="100%"
- png格式图片撑满容器
background: url('xxx') no-repeat center / 100% 100%;
