طريقة حفظ صفحة HTML كصورة وإدراج الصورة في PDF (موصى به)

المطلوب هو وظيفة استيراد Pdf، وبعد مشية طويلة في كل اتجاه، تم تحقيق ذلك بعد مرور الكثير من الطرق الملتوية، وأيضًا مشكوك في أن هذه الطريقة الحالية هي طريق منحنى.

يوجد إضافة jsPDF يمكنها إنشاء Pdf مباشرة في frontend بسهولة، ولكن لا تدعم IE.

ال前端:

أولاً، قم بإدراج　　html2canvas.js

html2canvas(document.body, { // موضوع الصورة
     // يمكن تكوين المعلمات الدقيقة هنا
     onrendered: function(canvas) { // دالة الاستدعاء عند إكمال التسجيل
       canvas.id = "mycanvas"; 
       // إنشاء بيانات الصورة بالـ base64
       var dataUrl = canvas.toDataURL('image/png');  // تحديد النوع، يمكن أيضًا عدم إضافة أي معلمات
       var formData = new FormData(); // إنشاء عنصر من نوع FormData
       formData.append("imgData", convertBase64UrlToBlob(dataUrl), "123.png"); // إضافة البيانات
       var xhr = new XMLHttpRequest(); // طريقة نقل البيانات
       xhr.open("POST", "../bulletin/exportPdf"); // تكوين طريقة التحويل وأدرج العنوان
       xhr.send(formData);
       xhr.onreadystatechange = function(){ // دالة الاستدعاء
         if(xhr.readyState == 4){
            if (xhr.status == 200) {
               var back = JSON.parse(xhr.responseText);
               if(back.success == true){
                 alertBox({content: 'نجاح استيراد Pdf!',lock: true,drag: false,ok: true});
               }else{
                 alertBox({content: 'فشل استيراد Pdf!',lock: true,drag: false,ok: true});
               
            
         
       };
     
}); 
// ستحول بيانات URL الصورة التي بالـ base64 إلى Blob
function convertBase64UrlToBlob(urlData){
  // إزالة رأس URL وتحويلها إلى byte
  var bytes = window.atob(urlData.split(',')[1]);    
  //معالجة الاستثناءات،تحويل الأكواد الأسيطة الأقل من 0 إلى أكواد أكبر من 0
  var ab = new ArrayBuffer(bytes.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  
  return new Blob([ab], {type: 'image/png'});

التوافق: Firefox 3.5+، Chrome، Opera، IE10+

لا يدعم: iframe،ملحقات المتصفح،Flash

يجب إضافة رأس السماح بالطلب المتعدد عبر الحدود إلى الخادم عبر الحدود لصور عبر الحدود

access-control-allow-origin: * access-control-allow-credentials: true

لا يدعم الصورة svg مباشرة، هناك مكتبة إصلاح، لكن لم أجربها بعد.

IE9 لا يدعم نمط البيانات FormData، ولا يدعم Blob، في هذه الحالة يتم إزالة رأس URL من النص الأساسي 64base المولد من canvas وتقديمه إلى الخلفية، بعد استقباله في الخلفية:

String base64 = Img.split(",")[1];
BASE64Decoder decode = new BASE64Decoder(); 
byte[] imgByte = decode.decodeBuffer(base64);

الخلفية:

إدخال مكتبة itext jar

　

@RequestMapping("/exportPdf")
public @ResponseBody void exportPdf(MultipartHttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
  ResultData result = new ResultData();  //自定义结果格式
  String filePath = "c:\\exportPdf2.pdf";
  String imagePath = "c:\\exportImg2.bmp";
  مستند_الوثيقة = new Document();} 
  try{
    Map getMap = request.getFileMap();
    MultipartFile ملف_ملفات = (MultipartFile) getMap.get("imgData"); //الحصول على البيانات
    InputStream ملف = mfile.getInputStream();
    بايت_الملف = FileCopyUtils.copyToByteArray(الملف);
    FileImageOutputStream مخرجات_الصورة = new FileImageOutputStream(new File(imagePath)); //فتح مخرجات الصورة
    مخرجات_الصورة.كتابة_البايت(fileByte, 0, fileByte.length); //إنشاء ملف صورة محلية
    مخرجات_الصورة.close();
    PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdf file
//    مستند_الوثيقة.setPageSize(PageSize.A2);
    مستند_الوثيقة.open();
    مستند_الوثيقة.add(new Paragraph("اختبار_بسيط ..."));
    صورة = Image.getInstance(imagePath); //itext-pdf-image
    المئة_الطول = صورة.الطول(); 
        المئة_العرض = صورة.عرض(); 
        المئة = الحصول_على_المئة(طول, عرض);  //تصغير الصورة بناءً على النسبة
        صورة.تحديد_مركز_الصورة(Image.MIDDLE); 
        صورة.تغير_نسبة_التحجيم(نسبة+3);
    مستند_الوثيقة.add(صورة);
    مستند_الوثيقة.close();
    result.setSuccess(true);
    خدمة_عمليات_الإدارة_العمليه.addOperateLogInfo(request, "التصدير_المستحيل: تم تصدير ملف Pdf بنجاح");
  System.err.println(de.getMessage());
    catch (Exception e) {
  
  e.printStackTrace();
    result.setSuccess(false);
    result.setErrorMessage(e.toString());
    try {
    operatelogService.addOperateLogError(request, "فشل في الإخراج: استثناء من الخادم");
      catch (Exception e1) {
    }
      e1.printStackTrace();
    
  
  response.getWriter().print(JSONObject.fromObject(result).toString());

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;

　iText هو مشروع معروف من موقع sourceforge مفتوح المصدر، وهو مكتبة Java تستخدم لإنشاء ملفات PDF.

سرعة المعالجة عالية، وتدعم الكثير من الميزات "الخاصة" لـ PDF.

لكن عندما يحدث خطأ في iText فإنه لا يُظهر رسالة خطأ، بل يقفز مباشرة، وعندما ينظر في ملف PDF التالف لا يجد السبب في الخطأ، وهو ما يسبب الإلهاء.

شكرًا للمراجع على المواضيع والمنشورات على الإنترنت وكذلك على البحث في بaidu.

هذا المقال يوضح كيفية حفظ صفحة HTML كصورة، وكتابة هذه الصورة في ملف PDF، وهو ما أقدمه إليكم في هذا الشرح. آمل أن يكون هذا مرجعًا لكم، وأتمنى أن تحصلوا على الدعم الكبير لتعليمات النقاش.