ECharts导出word 图表模糊失真

在项目中会有这样的需求，echars生成图表导入到word中

在项目中用的插件

博主有一篇文章将的是  vue使用jquery的三方插件jquery.wordexport.js  

https://blog.csdn.net/sinat_37984999/article/details/81164818

 

这样就可以在vue中使用导出jquery.wordexport的方法了

用这个插件很方便导出了图表，下面页面是这样的，第一个图是echarts的图表，第二个图是根据base64生成的img图片，第三个图就是一个普通的图片

 

我将echarts自带的 getdataurl() 方法获取base64的url，赋值给页面上的img 。如果直接下载下载出来的图片是模糊的

先上个代码

<template>
  <div id="pagecontent">
    hello word
    <div id="main" style="height:300px"></div>
    <input type="button" id="btn" value="下载">
    <img :src="imgurl" alt="">
    <img src="data:image/jpeg;base64,/9j/4aaqskzjrgabaqaaaqabaad/2wbdaaggbgcgbqghbwcjcqgkdbqndasldbksew8uhrofhh0ahbwgjc4nicisixwckdcpldaxndq0hyc5ptgypc4zndl/2wbdaqkjcqwldbgndrgyirwhmjiymjiymjiymjiymjiymjiymjiymjiymjiymjiymjiymjiymjiymjiymjiymjiymjl/waarcadiamgdasiaahebaxeb/8qahwaaaqubaqebaqeaaaaaaaaaaaecawqfbgcicqol/8qatraaagedawieawufbaqaaaf9aqidaaqrbrihmuege1fhbyjxfdkbkaeii0kxwrvs0fakm2jyggkkfhcygroljicokso0nty3odk6q0rfrkdisuptvfvwv1hzwmnkzwznaglqc3r1dnd4exqdhiwgh4ijipktljwwl5izmqkjpkwmp6ipqrkztlw2t7i5usldxmxgx8jjytlt1nxw19jz2uhi4+tl5ufo6erx8vp09fb3+pn6/8qahweaawebaqebaqebaqaaaaaaaaecawqfbgcicqol/8qatreaagecbaqdbacfbaqaaqj3aaecaxeebsexbhjbuqdhcrmimoeifekrobhbcsmzuvavynlrchyknoel8rcygromjygpkju2nzg5okneruzhselku1rvvldywvpjzgvmz2hpann0dxz3ehl6gooehyahiimkkpoulzaxmjmaoqokpaanqkmqsro0tba3ulm6wspexcbhymnk0tpu1dbx2nna4upk5ebn6onq8vp09fb3+pn6/9oadambaairaxeapwd3+iiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaoori1jxfo/h+3e+r6pbwahp5sgbb6dqfwfagvrxc/8j3qorfl4x8l6jfi33bu9h2s3+ol/admpotkvhvxdq/z654sksvbn7lokkxkv/bvwzh9kao5qlealy6bf5t/d29rh/fnlvb+zncr/amk1s5d/akt4h8t3i7itvzad+c4q3yfdrwpp0/nposfxp/z2vc1w/wcchopwoauren/c077ivewlufa7t/gta1vrs8tdbxum6+sugb+vojtbekmrpbgidgkqad8qry6npkzbpnptwbrumk5/pfaghrxo6l4ut9qktdqusacyjj7dfoi/98nk/pws2k+otko7t/ennq8sn/j31k1etkenmxd/crqb3ffcvf8qybodlxxppd3oe7nastzis1dvrzl+x/vrbxyryjngro6srdkspycpuuas0uuuaffffabrrrqauuuuaffffabrrrqavi+ipe2l+ftma/1e5wcackorsn/dvepnupghi6y8iaulu4dtxkz+vz2kf+snkprqptpk/wbccslw34kvtq1rffpjr1u9ypnrz4zbyl1audc3qf5nmgbkd1478ajdaonhbrpovmkxzl2vful0jz78j3re0x4feh9em+1patfaj1a/v3m87h13n0/dfdxrqauuuuaffffabrrrqauuuuavrm2gu7esc5hjmhkg145fdkw9cdwa49val6xiz/cwr3wjnnjtg/f2j/8abjj8v1uiu5ooa4n/ais7vtb/d+lth8mdp/awm7p7b6uun8f4gj3rqrhultu7wo7srqk5t5bljyxdq30iq2qdxgx/aiqn0+7fv/ccsen6gtvmtsmwt77siput6ovprmgdtkk5/wan+jifentmtbjaxttj5n5zsj57et0pqd1ddgiugoakkkkaciiigaooooakztv1k10bs7rurxxhbwygsrvydt79q0a8x+kxbv9q8meeecrfq99uugp5agpdmp1z+fadpaoi3hipuz8qpecf7y7j/sy2flbo352kd+8r398969rqcgkocjyokcroovvuycgcacp6aciiigaooooakkkkaciiigaooooakkkharvlwmsazakl3ihx+yoamoqgawkcmytsjgg6s7aafiaq2wradqzlgn31tdgftknksq+w+hwekaoy8wwvzo2oremdkjawe0ty9qty+t3a9tgd3tll9sjvxv2f9balyw97asllb3cljfivrliydvsgec1w/hbboxilwvcx3bajhqgnkegglj3opzzaw+jcgduakkkaciiigaooooak8t0zpij446pqgs1n4dtrzw46ec+dx+o+cfgk9gv7630zt7i+upfjgt42kkdjgaazncr8hdolt/a66ldrllvvbmw+lzvvmgb5sfqad+nahodfffabrrrqauuuuaffffabrrrqauuuuafc5jqcn45+ymqes9ma4ky9b5kga/snq6ovefgevpposfei4bikj06xs4fbzaw/9nj/cgdxvxh4y1pxzq7yxep3e1r5rtffjxhccxxtuei7eevwqnh7u5nb8rqt2mpy2yrkfn3bj8wxpuct1hpqjmqcmedrdpz3ggycwm8gb7inhj+odwr480sx8nenl/ttluwmtrd0mts4dhlvbbi44ji/cgd3rwz8rnr1dwlzz3vl3f8nqtre5mzngegaqxriamc7gv9plrofhappm2mel7czbsjcxyqcvasywqe+35xh+6a8y0k7ue+hul5i/wc8ishuyz7xx8bj/wcpnj+dfsl3bw6pps1ncjuguowjku91yyi/i0atryplgskbbkyblydcd0ntvyhw3u5j/bdraxd7rvtjjnpn/wb6fig/nqp/guvoakkkkacs7vdtsth06w+v7qo2tohl5jgwb/ifbvwjxmhlf8ld8ftczq/h3w7myxey5w7vmckjuqenr9aai7azuvihqs6lqltnb+eomgyspsva+fp+ukufweinrxpkcuceaxoqoigkqqmaadabuoaaaawb0p1abumsqwwvi33uuscegqamkzbbaipy0aeowhxlur34ea74komwr3fjcrbbdvo1g5g0t3ymnoouo1ej+edzfxf4r0zv5uwkw7t1kde+6rd8z7zrh/4vl4zi8n6houfi8vjftefmqyhchbbbunpjha6v0uj6va6hpnrplirla2sqjjvjkgd1pc0aanfffabrrrqauuuuaffffabxg3jtsh1nxh8qtmigz5tjtb2fr1yw7tgfuzh417zxlnxail8k+mnj8ew8bswcafynvrfzifj8r/gt+i0afns9gz6pa6tisyzzsw7nnhwruih5n+lbvx4yj0tvffgmxulittbnnjlxhtl4wjj6h/1rr/fuh6d4b1eewvq7+dddljvbs/tl3/zjoev7eyygjqvii5fcdrbmuoywomztcb1itmwsvilvbgaqdztjvsfpq8dpqb6g9h9g8ay6eh3m+i6bg2ez3n20px/vnh5v9kkorao6ayrxhqfdtzceidd8pxyd3noyaxrbkchgvdlrbn/zudj6mvcaaog0af2f8t/e+nxn9xd29tqozssh3rur9dimu5rhocyvjdeitxpoebj/aidow/8azq7mgaooooa5/waa60pdngzvtwugsw9uxiz08w8j/wcpevw+h+idqpbmnwsmtcyri4uwb7ztsfm5p4nh4vzvxvzezefnax+71lwivohzo4+sp1h5v6xqavyfi/x5o3gy1jfujxe5lz5nreu6wt6dspc11lfofxkgq6b4+j1+bxvluzwc0uf+fert8wunhwxnb/2ir0oak1h9o7ujoy6d4ftyowcd7tkzt+ixgku6j+0yrxii17rhfgednzuw2fvg6/ga8ys9k82436nmbgifm0txdkyvz6opp41nq0eksyzswr2ksrgbfhzlo4kbi5yy8jjp6cuafzml6pz6xp8n/p9wlxazlusrdkh/aaptwhxzp8aped3aekpfd7fns7uj5qhorhigzuhpkzb/cvpigaooooakkkkaciiigaooooakrxvrbd20ltcrjldkpr42gvzt1bhpvmigdyubwdrnhv7i38p2dtrvhu4o5tev5ada3fynbi2+x/8ar1usonwtjp8ain/hvz6pqj/kt7cywmkhp8wv+y/qv6/rqby/hdwonhmxnaa6e+1s9k8++vzbhpppydlhqdtxuuuuacfnz/jnmmzfv4f2yn0lt5ufoa72ub8fsns8a+nnahmf2ylt4j7qjhsf8cy131abrrrqb5n8xs2nr+gfeqoe0vv42mb+7g/dh9apxr0lwdkgugqrkeelzuv6paeideu9ivu3w11gy345hor7g4i+lcl4e8sxog348bej32ajbfjp10/cxsa+7gn+idjhtjqdqb6fwbquj6frvhjzalzxxvtipmjlxi+vsfcc1puuaewtfbpt7wrm8p8aidwthvjzdfpvj/i4j/emsw/al7uqjuvft9cwzmgkijt1jl49tkj9dxs1fahkeffh/wchfb4ztisilw67xujwlymptj6d2gk6uiigaooooakkkkaciiigaooooakkkkaciiigarf8u65f4b8l6lremd9kgaraf4n6kpxygfjwnlmkmbpi4rvbzmy4aa6knsk82ult/ifr9ta2sofconximubthhb+vd8saeqa8k9dj6uadj8ptek0hwvp9tcc3kym6umpuzshe2fpnh4v1lffabrrrqavzxi3whpvi/s/sd+gssml4lmliwb+zkf5jvxs0uaev6v4y1fwrdponj4s8boy01xfjimhys/3w9/z9t6xbxmf3bx3ftnhndinysrsgvh6gjrtb2ytdrtjls9t4ri3kghilqmrd3brk4paeeh+z/wimq3uj7ml/ziftfqseuy36f8aawboa7eiupxufhfhxd6fpmqip49pvdc599kox/4/tv8ahobemx3hvxfaefep2ezkpxiluaddrxjr8r/cuss2ptat3f3bswf+hqk0lxxh4bvwxba/pkrf3vu0z+waanyiqa1ftgia1g0jppov+nw0ksrdyord1u5oakoqk2p2coy2vbzzb1qyrkfhmpoligdn8mqsjng5gbgfwoanoqhe6tp+ncm399bwoc4qzzlggi9mnmo49e0eamyx6pyug4lrciqd9c0aadfzra9o8yy+q2k/w4qf1rlvfh/hltttupenhv8a+ecuolf/al5tj/sgdpqk4ofefbpwk0zwv4jv4b0njshgrd/z8xlj/kqj1rxx4lmmejasvh+yuya71ipdot32rkccerhboa9azlrszeadqt0fcxq/xesba+ol6hbza/q2p+pawizy/est7qcqy/c61v8a974n1rvnflpjs4mmua+kseafnxw6toemadzfzdlsbe0gznzdgfyfu+p9zqbyb8i+iffah/gwplfy53hsnnjwnh6syfef6darula0t7c1itragog3iujhhgu1va6aavaooakkkkaciiigaooooakkkkaciiigbcargji96z7vq9kvx/pul2vz/wbdrdh/ajitgigdbpg3wsqqfdwj4p8a04x//e1tf4deeg5xw/zif+msbp8a0eiuqripgfjoxrz7xq9ht0vvewonfrbe/lgvest0uc/xb9dqb5x8x/d+kajqomrafpfndacn3utdf84j4uuqqr3xkghb9kxpcgvax4it0j0rubr4r9ld4zeeqo44wcrdcezx2htx0d4z8ovo2kyr30y3uo3jma+umx/xshtj+6bhqowfmu/h/wceryvpjvdums7cfhaq5/lfzyhj7ox0u6siq0o3pcvgwtp4p1kxg8salaetarsq2i+usz753fjzgf0rq/hno/hxwlg9sr3rtpulm3mzordwbpmt2+62ggsvv716hy+c/dngii20dtyyojfzulfmrmuy+jntjoq6d400+indalibciowzbrzh0p0zkenjpqpytvj3hvrqnhljgx0yeafb6hk+f9hb/68o/8actox0btdltbp+nwlovpbwlh/acftwtxfewsn3a4ekzfkjyd1iyd+rq1wpzbrrrqavwnd1gkafbjiqkopbbuoobntn1qxxhwf2s01w8tdp1e/memm6a2kfzyombnagyfgec7q3grwk5cviyyam6kug0ruxai8txtqkemls0drofk858ho7jqypfi+xixggke/uzpdnin9ufv4b5iobnt76s3kjnmpho359vyfjmlmjjuawlrxdmgii7g5b/agflvadtra11k+v494nvbgjvm4owelgeud/kvlp9ah72noa+yne48rapa3sfnc6naxxvw4skb5qhzj0axrzwx1riblt9e0g6fymlbppwlpcx2xnm3f3mbbf8a7qdbx0mxy2olpkam5rs7d6kkk9ekkkkkaciiigaooooakwi/f3h+bwf7gi1a2k1hjxyffj3azk5hg4dtnnynxt8up4x8gzpbsvvr1vstsw6oza5f/aicoj+ukxgs4bx4tk9haxrt6dlhcxpgmb5ydpky+pb94p9cmgdv9f1q08pajd6veti2tyzi+dyfqd3jwb9a4j4w6jdxud5421ym/2trlf4g/wc2/gvfqeyp0c1b8twfxfrnhrwzhkyrxuxa8vm6fuixuwfqhdfibxq6f4/0g4lggto76oxkkfvb3z2braynnaqrirjk8a9dqb2dfffabwdremx6tod/p0gbs6t5itn/auj+tv7vvps/ijttmlkfu7aeuajktgy+h+jmra1oybwx0otqb5ibctdg58ssvdenueuacp8itre++hgnrt5+02beymu9vaniap++dtd5xmfwwitpepjrtametrlthfqsakf8aonel7hngrn0oawkjwkwo5eekbic4yehfahmcmoah49vrk2eoxnh4zgcwi1qdkt+4ohyp1wmdootzwp/y39m6blp3h4q6fjj925xefykzy55ykz5pes/wub4cs7fwrqaef7aapawoeu48kh4z3ppk9qfbbrqsh0r89zrf4t4lxkvdi9f0/wccbwssutow/w0/4mtxvp5jkgiyujuowf8afom+9xajewomojhvc52ruomn0hrrnphbqstyueirszmegar56qpzqxa3nb6zw280bmfbvlwnmd2jwbxqjpxe6xk+s61bdvflfp1rk26youaaujhmftyfajc56kk9hxbd1r9b4eo+yw3l1mkm46iiivojmkkkkaciiigaooooa8h+oudmdwxcbc0eepbh+rlwpxwa1ri01xsvhpyavp2mtqd1d2oiupmuugkmvszus/u5j4966rxx4ctvfxh650i5do1lazju+9fidlxh0ncpbfdy/wbyvlexxxrka5bbrlla0shyo9xgdi/owfh5uacj43m8qal480e32js6vb6taulyqt2kpalzq0gdpwuvib9s12mmptqens+hooovszdhklhrux5o1fapb9a8z/cur+ihhps/dfirrovdwmg3uliwv2wojncviisfcgk8jj6v0hhburdpfpibv5lxy6pyyrsmywaqm3/vm2h50aehaf4m0zw7gxe31c0kubm3syqlmpkgvbpy5zxnmt+vk/hknhgw8k6ncmxri9ymblsb4hcirszbwp3shsbz6v6fflhnghidxq9gu5b/ggdzzxrena/fxwaizlpjlunh/ssig/59qu6qfupjd4llpzg206zgu/3qxdyp5guw8c22raf8vno8sxwmarqmi2moye0xq7qyfxb164pxtnjnitfwxql2unixxt4jjoi2opnf5ntcfjiscslq7d++2eg54+lahknixxver+ixiy08km7p2+7wkv7knmkbygvwgxkdjospaut+e/w28s6z4lj1/xtjzlcgkwvmwlnlkrhwcqfgc885xxohwtsxh8m3wpzwptpnyv5trebjdkjt8mr/ugh8a7ugaooooaz9q0yx1o0a3vrsg5gpjjmqmm+vpq+9ykvgfsvlbydfxkkdirqnwfz24d9k6uknztpqn8sa8w0dqdq0vxnbdq2innfojs/b7rurckm0jplirlrlgbk59txpheo9f0y9kubtudmwos6tyypbi+xzo2xld2dgghsd7y71zt+kltl+ax/so7ku7qhr2onw3lit8rjx+8jgsab2pevi85y3e1a6lcpum8jkxgswv63cduddurmykw68or3nyrwpejlxjj2eg/krjippwvtr06vheerj7lwvp8c0bxztcjjvcyyo3znn3ytw7jrx1gaw8qfllzlj3huuuv6jiuuuuaffffabrrrqauuuuacb488k3fikdt73sbllbwdln+0wcsgyhp8aejexwpyrk5fd/jxxwtzpup6vpnhvt7sp/adxaujpr3aeiyofb9+ee/ioooa7b/hp4kepy28madjgmiea/moazj8hvbu8tbzxvtk5c297kgu+og7iiigax4uazhxhr/iajoyjqjgcrnj8l/dfnex3lxbdancxnckuo3lz7t64y7f0oooa7udaxs0uuaffffabrrrqavgubijajfffs0nubjrrrvaffffah//z" alt="">
  </div>

</template>
<script>
var echarts = require("echarts");
import $ from "./src/jqueryexport";
import "./src/filesaver";
import "./plugin/jquery.wordexport";
import { settimeout } from 'timers';
export default {
  data() {
    return {
      imgurl: ""
    };
  },
  mounted() {
    var mychart = echarts.init(document.getelementbyid("main"));
    mychart.setoption({
      title: {
        text: "echarts 入门示例"
      },
      tooltip: {},
      xaxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yaxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
    settimeout(()=>{
        this.imgurl = mychart.getdataurl();
    },200)
   
    $(document).ready(function($) {
      $("#btn").click(function(event) {
        $("#pagecontent").wordexport();
      });
    });
  }
};
</script>

这样是模糊的，需要改动插件里面的一个地方就瞬间清晰了

找到jquery.wordexport.js

jquery.wordexport

这个数值可以根据你需要清晰图片的大小来设置

 

 希望可以帮到和我遇到一样问题的你