山东大学项目实训——古籍云端检索系统——SVG转换（8）

本篇博客讲述一下svg如何转换为pdf和png
这里的关键点在于先获取svg的base64格式，以及将base64格式转换为pdf和png，直接上源码

 async replaceImgPromise(svgData, i){
      return new Promise((resolve => {
        let imageUrl = /href="([^"]*)"/.exec(svgData[i])[1];
        let imageId = /href="http:\/\/211\.87\.232\.197:8081\/sdudoc\/img\/get_by_id\?id=([^"]*)"/.exec(svgData[i])[1];
        this.$http({
          method: 'post',
          url: 'http://211.87.232.198:8081/search-engine/solr/getPNG',
          params: {
            pid: String(imageId)
          }
        }).then(res => {
          console.log(res.data)
          svgData[i] = svgData[i].replace(imageUrl, res.data);
          resolve();
        });
      }));
    },

 async replaceImgPromiseAll(svgData){
      return new Promise((resolve => {
        let imageUrls = [];
        let imageIds = []
        for(let i = 0; i < svgData.length; i++){
          imageUrls[i] = /href="([^"]*)"/.exec(svgData[i])[1];
          let id = /href="http:\/\/211\.87\.232\.197:8081\/sdudoc\/img\/get_by_id\?id=([^"]*)"/.exec(svgData[i]);
          id = id || /href="http:\/\/211\.87\.232\.197:8080\/img\/get_by_id\?id=([^"]*)"/.exec(svgData[i]);
          imageIds[i] = id[1];
        }
        this.$http({
          method: 'post',
          url: 'http://211.87.232.198:8081/search-engine/solr/getPNGs',
          data: qs.stringify({
            pids: JSON.stringify(imageIds)
          })
        }).then(res => {
          for(let i = 0; i < svgData.length; i++){
            svgData[i] = svgData[i].replace(imageUrls[i], res.data[i]);
          }
          resolve();
        });
      }));
    },

    async svg2ImagePromise(svgData, i, dataUrls, width, height, padding){
      return new Promise((resolve => {
        let source = '<?xml version="1.0" standalone="no"?>\r\n' + svgData[i];
        let image = new Image;
        // 解决跨域 Canvas 污染问题
        // image.setAttribute("crossOrigin", "anonymous");
        image.onload = function() {
          let realWidth = width - padding * 2;
          let realHeight = realWidth / width * height ;
          context.drawImage(image, padding, padding, realWidth, realHeight);
          dataUrls[i] = canvas.toDataURL("image/png");
          resolve();
        }
        image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
        let canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        let context = canvas.getContext("2d");
        context.fillStyle = '#FFFFFF';
        context.fillRect(0, 0, width, height);
      }));
    },

async svg2png(){
      let pageWidth = 2480;
      let pageHeight = 3508;
      let drawWidth = pageWidth;
      let drawHeight = drawWidth / 592.28 * 841.89;

      drawWidth /= this.slider_value;
      drawHeight /= this.slider_value;

      let padding = drawWidth * 0.05;

      let dataUrls = [];

      for(let i = 0; i < this.svg.length; i++){
        await this.svg2ImagePromise(this.svg, i, dataUrls, drawWidth, drawHeight, padding);
        // let a = document.createElement("a");
        // a.download = "Atlas.png";
        // a.href = dataUrls[i];
        // a.click();
      }

      let zip = new JSZip();
      let folder = zip.folder(this.detail.title);
      for(let i = 0; i < dataUrls.length; i++){
        folder.file(this.detail.title + "_" + i + ".png", dataUrls[i].substring(22), {
          base64: true
        });
      }
      let title = this.detail.title;
      zip.generateAsync({ type: "blob" }).then(function(content) {
        FileSaver.saveAs(content, title + ".zip");
      });
    },

 async svg2pdf(){
      let pageWidth = 2480;
      let pageHeight = 3508;
      let drawWidth = pageWidth;
      let drawHeight = drawWidth / 592.28 * 841.89;

      drawWidth /= this.slider_value;
      drawHeight /= this.slider_value;

      let pdfImageWidth = 595.28;
      let pdfImageHeight = 592.28 / drawWidth * drawHeight;

      let padding = drawWidth * 0.05;

      let dataUrls = [];

      for(let i = 0; i < this.svg.length; i++){
        await this.svg2ImagePromise(this.svg, i, dataUrls, drawWidth, drawHeight, padding);
        // let a = document.createElement("a");
        // a.download = "Atlas.png";
        // a.href = dataUrls[i];
        // a.click();
      }

      let pdf = new jspdf.jsPDF('p', 'pt', 'a4');
      for(let i = 0; i < dataUrls.length; i++){
        pdf.addImage(dataUrls[i], 'PNG', 0, 0, pdfImageWidth, pdfImageHeight);
        if(i !== dataUrls.length - 1) pdf.addPage();
      }
      pdf.save(this.detail.title + ".pdf");
    },

这里转换成png多做了一步压缩，最终获取的是压缩包