前端下载svg格式图片

Mr.WeI197

于 2022-10-21 13:23:53 发布

阅读量2.3k

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_55814597/article/details/127444584

版权

本文探讨了如何在前端使用JavaScript和HTML实现SVG格式图片的下载功能，虽然下载的文件扩展名为SVG，但内容仍是图片，因此在放大时可能会出现失真问题。

摘要由CSDN通过智能技术生成

前端完成下载svg格式的图片但是下载的该文件只是格式是svg，实际还是图片，图片放大还是会失真

downloadSvg() {
    new html2canvas(document.querySelector("#echartPdf"), {
      useCORS: true,
      allowTaint: true // 这两个属性都是图片跨域相关属性
    }).then(res => {
      const width = res.width; //图片宽
      const height = res.height;//图片高
      var dataURL = res.toDataURL(); //canvas获取的base64格式
      //svg 的dom节点(字符串)
      var svgString = `<svg id="downloadSvg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="${width}px" height="${height}px"
    viewBox="0 0 ${width} ${height}" enable-background="new 0 0 ${width} ${height}" xml:space="preserve">
        <image id="image0" width="${wi