<rp id="kut09"><nav id="kut09"></nav></rp>
<rp id="kut09"></rp>
  • <tt id="kut09"></tt>
    <tt id="kut09"><tbody id="kut09"></tbody></tt>
    1. <u id="kut09"></u>
    2. <tt id="kut09"><noscript id="kut09"></noscript></tt>
    3. html轉pdf截圖保存功能的實現

        發布時間:2020-12-22 15:26:34   作者:ToBeYourBaBa   我要評論
      這篇文章主要介紹了html轉pdf截圖保存功能的實現,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

      使用技術

      itext.jar  : 將byte文件輸入流轉換為圖片,pdf等

      html2canvas.js :將html頁面區域截圖為base64編碼的圖片資源

      java+js

      1. 準備資源

      itext.jar
       www.baidu.com

      html2canvas.js
      www.baidu.com

      2.前端代碼:

      //進行截圖操作,document.querySelector("body") 為要截圖的區域
           function test() {
                  html2canvas(document.querySelector("body"), {
                      onrendered: function (canvas) {
                          var dataUrl = canvas.toDataURL('image/png');
                          var formData = new FormData(); //模擬表單對象
                          formData.append("imgData", convertBase64UrlToBlob(dataUrl)); //寫入數據
                          var xhr = new XMLHttpRequest(); //數據傳輸方法
                          xhr.open("POST", "http://localhost:8080/pdf"); //配置傳輸方式及地址
                          xhr.send(formData);
                          xhr.onreadystatechange = function () { //回調函數
                          };
                      }
                  });
              }
      
              //格式化圖片base64編碼轉換為byte文件流
              function convertBase64UrlToBlob(urlData){
                  //去掉url的頭,并轉換為byte
                  var bytes=window.atob(urlData.split(',')[1]);
                  //處理異常,將ascii碼小于0的轉換為大于0
                  var ab = new ArrayBuffer(bytes.length);
                  var ia = new Uint8Array(ab);
                  for (var s = 0;s<bytes.length;s++){
                      ia[s] = bytes.charCodeAt(s);
                  }
                  return new Blob( [ab] , {type : 'image/png'});
              }
              
              <body onclick="test()">//調用截圖方法即可

      3.后端代碼:

      @RequestMapping(value = "/pdf",method = RequestMethod.POST)
          public void test(MultipartHttpServletRequest request, HttpServletResponse response) throws IOException {
              String filePath = "D:\\blog\\exportPdf2.pdf";
              String imagePath = "D:\\blog\\exportImg2.png";
              Document document = new Document();
              try{
                  Map getMap = request.getFileMap();
                  MultipartFile mfile = (MultipartFile) getMap.get("imgData"); //獲取數據
                  InputStream file = mfile.getInputStream();
                  byte[] fileByte = FileCopyUtils.copyToByteArray(file);
      
                  FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//打開輸入流
                  imageOutput.write(fileByte, 0, fileByte.length);//生成本地圖片文件
                  imageOutput.close();
      
                  PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdf文件
                  document.open();
                  document.add(new Paragraph("JUST TEST ..."));
                  Image image = Image.getInstance(imagePath); //itext-pdf-image
                  float heigth = image.getHeight();
                  float width = image.getWidth();
                  int percent = getPercent2(heigth, width);  //按比例縮小圖片
                  image.setAlignment(Image.MIDDLE);
                  image.scalePercent(percent+3);
                  document.add(image);
                  document.close();
      
              }catch (DocumentException de) {
                  System.err.println(de.getMessage());
              }
              catch (Exception e) {
                  e.printStackTrace();
      
              }
          }
      
          private static int getPercent2(float h, float w) {
              int p = 0;
              float p2 = 0.0f;
              p2 = 530 / w * 100;
              p = Math.round(p2);
              return p;
          }

      4 包名

      import com.itextpdf.text.Document;
      import com.itextpdf.text.DocumentException;
      import com.itextpdf.text.Image;
      import com.itextpdf.text.Paragraph;
      import com.itextpdf.text.pdf.PdfWriter;
      import org.springframework.boot.SpringApplication;
      import org.springframework.boot.autoconfigure.SpringBootApplication;
      import org.springframework.stereotype.Controller;
      import org.springframework.util.FileCopyUtils;
      import org.springframework.web.bind.annotation.RequestMapping;
      import org.springframework.web.bind.annotation.RequestMethod;
      import org.springframework.web.multipart.MultipartFile;
      import org.springframework.web.multipart.MultipartHttpServletRequest;
      
      import javax.imageio.stream.FileImageOutputStream;
      import javax.servlet.http.HttpServletResponse;
      import java.io.File;
      import java.io.FileOutputStream;
      import java.io.IOException;
      import java.io.InputStream;
      import java.util.Map;

      4 前端截圖,訪問后端接口,保存截圖文件到本地為pdf或者其他格式的文件。

       有興趣的同學可以把后端改為下載文件到本地

      5 項目源碼地址

      https://github.com/zhangjy520/learn_java/tree/master/boot 

      到此這篇關于html轉pdf截圖保存功能的實現的文章就介紹到這了,更多相關html轉pdf截圖保存內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

      相關文章

      最新評論

      218彩票 www.qdxzk.com:堆龙德庆县| www.apjiahaisw.com:遵化市| www.phldb.com:三门峡市| www.kzftp.com:灵石县| www.zhongyuanpq.com:哈尔滨市| www.hg10345.com:共和县| www.eng-tech-group.com:柘荣县| www.523962.com:馆陶县| www.4fsy.com:怀远县| www.cheap-uggboots4u.com:都江堰市| www.headsickpinups.com:漳州市| www.alpost120.org:繁峙县| www.shermantheband.com:平山县| www.cjcfootball.com:军事| www.jordanegasc.com:太仆寺旗| www.zhongyifeedtrade.com:邢台市| www.yunlvhuahui.com:东阳市| www.ay-maplastik.com:渝北区| www.massage-to-heal.com:多伦县| www.tanglay.net:永城市| www.ahtydzs.com:云安县| www.sujokcenter.com:稻城县| www.hs855.com:资阳市| www.bin-heart.com:泰来县| www.kartvizitturkiyem.com:响水县| www.4455ep.com:衢州市| www.hi-fiaudio.com:北辰区| www.cp7173.com:淳化县| www.howlget.com:南丹县| www.hg43678.com:麦盖提县| www.bunnykitten.com:英吉沙县| www.nishiyama-shotengai.net:钟祥市| www.zhengbojx.com:轮台县| www.cafeavec.com:全州县| www.beautyincarnate.com:温泉县| www.cp5117.com:布尔津县| www.zhiweifurniture.com:谷城县| www.jsccdt.com:揭阳市| www.adonis-danieletto.com:红桥区| www.108aaa.com:英吉沙县| www.zctqw.cn:筠连县| www.dow98.com:大关县| www.ehbermanlaw.com:当雄县| www.cp3929.com:高雄县| www.chinawdtz.com:盈江县| www.informasijakarta.com:南宁市| www.wqqnw.com:吐鲁番市| www.akillipet.com:烟台市| www.banthuoconline.com:青河县| www.southfumigation.com:清远市| www.e-andac.com:霸州市| www.quangvinhexpress.com:平罗县| www.apexhealthproducts.com:昭觉县| www.chery-ruixiang.com:木兰县| www.baraka-ter.com:仁布县| www.chilloutcolor.com:佛教| www.cryptosharefund.com:西丰县| www.cbplanningpartners.com:油尖旺区| www.digishoppy.com:饶河县| www.qdsunpu.com:长白| www.cdxufeng.com:通河县| www.zhongyuanpq.com:上杭县| www.99069vv.com:沾化县| www.rareearthsoil.com:石渠县| www.iot-online.net:南华县| www.catherinebroad.com:双柏县| www.8dem.com:长子县| www.0539jf.com:彝良县| www.toecy.com:沂源县| www.bishuikuai.com:顺义区| www.poengun.com:聊城市| www.aljammali.com:奎屯市| www.fapuc.com:科技| www.s5653.com:农安县| www.hayatatutun.com:会泽县| www.yzasiaexpo.com:三都| www.testsite03.com:霍山县| www.petethesweet.com:万州区| www.lulumom.com:西昌市| www.nba-sports.com:伊宁县| www.tanyoo-net.com:延安市| www.thisisbookshelf.com:偏关县| www.messinginaction.com:元江| www.superonlline.com:新津县|