vue 3.0项目中echart生成base64生成pdf

将某个echart 转换为base,将base64 上传七牛返回网络地址


// 下载
const downLoadEchart = (id,index)=>{
    
    let echart = echarts.getInstanceByDom(document.getElementById(id));
    let base64Str =  echart.getDataURL({
        type: 'png',
        pixelRatio: 1,
        backgroundColor: '#fff'
    });

    setTimeout(()=> {
        uploadBase64().then((res:any)=>{
            var src = QNImgUrl.value + res.key;

            console.log('src',src);
            detailData.value.list[index].canvasImg = src;
        });
    }, 1000);
    
    function uploadBase64() {
        var data = base64Str.replace(/^data[\S]+;base64,/, '');
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open('post', 'https://upload.qiniup.com/putb64/-1/', false);
            xhr.setRequestHeader('Content-Type', 'application/octet-stream');
            xhr.setRequestHeader('Authorization', 'UpToken ' + QNToken.value);

            xhr.onload = function() {
                resolve(JSON.parse(xhr.response));
            };
            xhr.onerror = function() {
                reject();
            };
            xhr.send(data);
        });
    }
};

// 获取七牛tonken
const getQNTokenFn = async()=>{
    let { data } = await getQNToken();
    QNToken.value = data.token;
    QNImgUrl.value = data.img_url;
};


你可能感兴趣的:(vue 3.0项目中echart生成base64生成pdf)