js vue下载图片

news/2024/7/10 2:46:11 标签: js, vue

图片需要转化成base64,然后在下载。

  // 图片转化base64
    getUrlBase64(url) {
      return new Promise((resolve) => {
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        let img = new Image();
        img.crossOrigin = "Anonymous"; //允许跨域
        img.src = url;
        img.onload = function () {
          canvas.height = 300;
          canvas.width = 300;
          ctx.drawImage(img, 0, 0, 300, 300);
          let dataURL = canvas.toDataURL("image/png");
          canvas = null;
          resolve(dataURL);
        };
      });
    },
    //  下载图片
    getQrcode(row) {
      this.loading = true;
      var name = row.reportNo;
      this.getUrlBase64(row.twoCodeContent).then((base64) => {
        let a = document.createElement("a");
        a.style.display = "none";
        a.download = name;
        a.href = base64;
        document.body.appendChild(a);
        a.click();
        this.loading = false;
      });
    },

http://www.niftyadmin.cn/n/1367373.html

相关文章

element-UI 文件上传 组件化

这里是封装的上传按钮组件 DOM写法 <template><el-uploadaction"#":http-request"requestUpload":show-file-list"showFileList"v-loading"loading"><el-button:type"buttonType"icon"el-icon-upload2…

正则表达 数字和小数 只能含有一个小数点 保留3小数 首位不能是小数点

html写法 <el-inputmaxlength"15":oninput"(val oninputNumber(val))"v-model.trim"val"/> script写法 data() {return {val: "",};}, methods: {oninputNumber(param) {return param.replace(/[^\d.]/g, "").replace…

echarts按需引入支持echarts图片下载echarts随着浏览器窗口变化

在本地项目里创建/js/lib/eCharts.js文件&#xff0c;文件内容如下 /*按需引入 eCharts*/ import * as eCharts from echarts/core // 引入核心库 import { BarChart, LineChart, PieChart, GaugeChart } from echarts/charts // 引入图表类型 import {TitleComponent,Tooltip…

后台数据全部返回前端element ui实现前端分页

View <template><div class"main-view"><div class"btn-view"><el-button size"mini" type"primary" click"downloadClick">导出</el-button></div><div class"table-view&qu…

前端vxe-table导出xlsx excel文档和csv文档

准备工作 npm 安装 vxe-tablenpm 安装 exceljsnpm 安装 vxe-table-plugin-export-xlsx mian.js import VXETable from vxe-table import VXETablePluginExportXLSX from vxe-table-plugin-export-xlsx VXETable.use(VXETablePluginExportXLSX)<template><div class&…

hex颜色透明度对比表

"#D9001B"这样写就是纯色没有通明度 "#D9001BFF"这样写通明度就是1 "#D9001B80"这样写通明度就是0.5 1.00:FF,0.99:FC,0.98:FA,0.97:F7,0.96:F5,0.95:F2,0.94:F0,0.93:ED,0.92:EB,0.91:E8,0.90:E6,0.89:E3,0.88:E0,0.87:DE,0.86:DB,0.85:D9,0.84…

echarts 雷达图 点的颜色自定义 名字颜色自定义 vue实现

根据不同的等级 节点显示不同的颜色 DOM层 <div class="main-left"><div id="radar_echarts" style="width: 100%;height: 100%;"></div><div class="main-left-top-right"><div class="item gf&quo…