জাভাস্ক্রিপ্ট ব্যবহার করে ডিভিএল থেকে পিডিএফ তৈরি করুন

232

আমার নীচের এইচটিএমএল কোড রয়েছে:

<!DOCTYPE html>
<html>
    <body>
        <p>don't print this to pdf</p>
        <div id="pdf">
            <p><font size="3" color="red">print this to pdf</font></p>
        </div>
    </body>
</html>

আমি যা করতে চাই তা হ'ল পিডিএফ প্রিন্ট করা যা "পিডিএফ" এর একটি আইডি দিয়ে ডিভিতে পাওয়া যায়। এটি অবশ্যই জাভাস্ক্রিপ্ট ব্যবহার করে করা উচিত। "পিডিএফ" ডকুমেন্টটি তখন "foobar.pdf" এর ফাইলের নাম দিয়ে স্বয়ংক্রিয়ভাবে ডাউনলোড করা উচিত

আমি এটি করতে jspdf ব্যবহার করছি, তবে এটির কেবলমাত্র ফাংশনটি হচ্ছে "পাঠ্য" যা কেবল স্ট্রিংয়ের মান গ্রহণ করে। আমি পাঠ্য নয়, জেএসপিডিএফ-তে এইচটিএমএল জমা দিতে চাই।

javascript  jspdf 
— জন ক্রফোর্ড
সূত্র
1
উপরে উল্লিখিত হিসাবে আমি "পাঠ্য" ফাংশনটি ব্যবহার করতে চাই না । আমি এটি এইচটিএমএল দিতে চাই। আপনার লিঙ্কটি কেবলমাত্র সরল পাঠ্যের সাথে সম্পর্কিত হয়েছে এবং এইচটিএমএল নয়
— জন ক্র্যাফোর্ড
2
jsPDF করে একটি আছে fromHTMLফাংশন; "এইচটিএমএল রেন্ডারার" উদাহরণটি এখানে দেখুন: mrrio.github.io/jsPDF
— mg1075
জাসিপিডিএফ টিউটোরিয়ালটি এখানে চেষ্টা করুন freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas
— কোড স্পাই

উত্তর:

228

jsPDF প্লাগইন ব্যবহার করতে সক্ষম। এটি HTML প্রিন্ট করতে সক্ষম করতে আপনাকে নির্দিষ্ট প্লাগইন অন্তর্ভুক্ত করতে হবে এবং তাই নিম্নলিখিতগুলি করতে হবে:

  1. Https://github.com/MrRio/jsPDF এ যান এবং সর্বশেষ সংস্করণটি ডাউনলোড করুন।
  2. আপনার প্রকল্পে নিম্নলিখিত স্ক্রিপ্টগুলি অন্তর্ভুক্ত করুন:
    • jspdf.js
    • jspdf.plugin.from_html.js
    • jspdf.plugin.split_text_to_size.js
    • jspdf.plugin.standard_fonts_metrics.js

আপনি যদি নির্দিষ্ট উপাদানগুলিকে উপেক্ষা করতে চান তবে আপনাকে সেগুলিকে একটি আইডি দিয়ে চিহ্নিত করতে হবে, যা আপনি তখন জেএসপিডিএফের একটি বিশেষ উপাদান হ্যান্ডলারটিতে উপেক্ষা করতে পারেন। সুতরাং আপনার এইচটিএমএল দেখতে হবে:

<!DOCTYPE html>
<html>
  <body>
    <p id="ignorePDF">don't print this to pdf</p>
    <div>
      <p><font size="3" color="red">print this to pdf</font></p>
    </div>
  </body>
</html>

তারপরে আপনি পপআপে তৈরি পিডিএফ খুলতে নিম্নলিখিত জাভাস্ক্রিপ্ট কোডটি ব্যবহার করুন:

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

আমার জন্য এটি একটি সুন্দর এবং পরিপাটি পিডিএফ তৈরি করেছে যা কেবল "এইটিকে পিডিএফ প্রিন্ট করুন" অন্তর্ভুক্ত করে।

দয়া করে মনে রাখবেন যে বিশেষ উপাদান হ্যান্ডলাররা কেবলমাত্র বর্তমান সংস্করণে আইডি নিয়ে কাজ করে যা গিটহাব ইস্যুতেও বর্ণিত । এতে বলা হয়েছে:

নোড গাছের প্রতিটি উপাদানগুলির সাথে ম্যাচিং সম্পন্ন হওয়ার কারণে, আমার ইচ্ছাটি এটি যত তাড়াতাড়ি করা সম্ভব। সেক্ষেত্রে এর অর্থ হ'ল "কেবলমাত্র উপাদান আইডি মিলেছে" উপাদান আইডিগুলি এখনও jQuery স্টাইলে করা হয় "# আইডি", তবে এর অর্থ এই নয় যে সমস্ত jQuery নির্বাচক সমর্থিত।

সুতরাং '#ignorePDF' এর পরিবর্তে '.ignorePDF' এর মতো শ্রেণি নির্বাচকদের সাথে প্রতিস্থাপন করা আমার পক্ষে কার্যকর হয়নি। পরিবর্তে আপনাকে প্রতিটি উপাদানগুলির জন্য একই হ্যান্ডলার যুক্ত করতে হবে, যা আপনি পছন্দ করতে পারেন:

var elementHandler = {
  '#ignoreElement': function (element, renderer) {
    return true;
  },
  '#anotherIdToBeIgnored': function (element, renderer) {
    return true;
  }
};

উদাহরণগুলি থেকে এটিও বলা হয়েছে যে 'এ' বা 'লি' এর মতো ট্যাগ নির্বাচন করা সম্ভব। সর্বাধিক ব্যবহারের ক্ষেত্রে এটি অযৌক্তিক কিছুটা হলেও হতে পারে:

আমরা বিশেষ উপাদান হ্যান্ডলার সমর্থন করি। তাদের আইডি বা নোড নামের জন্য jQuery- স্টাইল আইডি নির্বাচনকারীর সাথে নিবন্ধন করুন। ("# আইএএমআইডি", "ডিভি", "স্প্যান" ইত্যাদি) বর্তমানে অন্য কোনও ধরণের নির্বাচক (শ্রেণি, যৌগিক) জন্য কোনও সমর্থন নেই।

যোগ করার জন্য একটি খুব গুরুত্বপূর্ণ বিষয় হ'ল আপনি আপনার স্টাইলের সমস্ত তথ্য (সিএসএস) হারাবেন। ভাগ্যক্রমে জেএসপিডিএফ এইচ 1, এইচ 2, এইচ 3 ইত্যাদি সুন্দরভাবে ফর্ম্যাট করতে সক্ষম হয়েছে যা আমার উদ্দেশ্যে যথেষ্ট ছিল। অতিরিক্তভাবে এটি কেবল পাঠ্য নোডের মধ্যেই পাঠ্য মুদ্রণ করবে, যার অর্থ এটি টেক্সারিয়াস এবং এর মতো মানগুলি প্রিন্ট করবে না। উদাহরণ:

<body>
  <ul>
    <!-- This is printed as the element contains a textnode -->        
    <li>Print me!</li>
  </ul>
  <div>
    <!-- This is not printed because jsPDF doesn't deal with the value attribute -->
    <input type="textarea" value="Please print me, too!">
  </div>
</body>
— snrlx
সূত্র
3
আমি অনুমান করতে যাচ্ছি উপাদান হ্যান্ডলার একটি শ্রেণি হতে পারে? এটি HTML5 স্ট্যান্ডার্ডের সাথে সামঞ্জস্য রেখে অনেক বেশি শব্দার্থক হবে। একটি আইডি সিএসএসে খুব বেশি স্বল্পতার ওজন বহন করে না, এটি অনন্যও হতে হবে।
— অনুজ্ঞাসূচক
না, যতদূর আমি জানি, ক্লাসগুলি এই মুহুর্তে কোনও বৈধ নির্বাচনকারী নয় যা তাদের উদাহরণগুলিতে বলেছে: "আমরা বিশেষ উপাদান হ্যান্ডলারকে সমর্থন করি ID "ডিভ", "স্প্যান" ইত্যাদি) এই সময়ে অন্য কোনও ধরণের নির্বাচক (শ্রেণি, যৌগিক) জন্য কোনও সমর্থন নেই " তবুও, যদি ট্যাগ ব্যবহারের ক্ষেত্রে এটি আপনার ব্যবহারের সাথে সামঞ্জস্য হয় এবং আপনার পৃষ্ঠায় অন্য গুরুত্বপূর্ণ উপাদানগুলি লুকিয়ে না রাখে তবে ট্যাগের নামগুলি ব্যবহার করা সম্ভব।
— snrlx
তাদের পৃষ্ঠায় প্যারাল.এক্স / প্রোডাক্টস / জেএসপিডিএফ তারা জানিয়েছে যে তারা শিমের মাধ্যমে আই 6+ সমর্থন করে। যদিও নিজে চেষ্টা করে দেখিনি।
— snrlx
2
@ এসএনআরএলএক্স আমি ফাঁকা পিডিএফ পেয়েছি এবং এই ত্রুটি: renderer.pdf.s হ্যাশকোড কোনও ফাংশন নয়
— লিসা সলোমন
5
"আপনি যদি কিছু উপাদান উপেক্ষা করতে চান তবে আপনাকে তাদের একটি আইডি দিয়ে চিহ্নিত করতে হবে" - একটি দুর্দান্ত লাইব্রেরি, যা এই উল্টানো পুনর্নির্মাণ দ্বারা ধ্বংস হয়ে যায়। ওপি একটি একক মুদ্রণ করতে চেয়েছিল <div>, যা শত এক হতে পারে - সুতরাং তাকে সমস্ত অযাচিত ডিওএম উপাদান চিহ্নিত করতে হবে ??
— মাওগ বলছেন মনিকা
53

এটি সহজ সমাধান। এটি আমার পক্ষে কাজ করে You আপনি জাভাস্ক্রিপ্ট মুদ্রণ ধারণাটি ব্যবহার করতে পারেন এবং পিডিএফ হিসাবে এটি সংরক্ষণ করতে পারেন।

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("#btnPrint").live("click", function () {
            var divContents = $("#dvContainer").html();
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(divContents);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
        });
    </script>
</head>
<body>
    <form id="form1">
    <div id="dvContainer">
        This content needs to be printed.
    </div>
    <input type="button" value="Print Div Contents" id="btnPrint" />
    </form>
</body>
</html>
— বৈভব কুলকার্নি
সূত্র
27
"এবং সহজ এটি পিডিএফ হিসাবে সংরক্ষণ করুন" - আমি সেই অংশটি মিস করেছি। তুমি এটা কিভাবে কর?
— মাওগ বলছেন মনিকা
9
এটি সিএসএস স্টাইলিংয়ের সমস্যা সমাধানের জন্য আমি আর একটি সিএসএস ফাইল প্রিন্ট পিডিএফ.এস.এস.এস. তৈরি করেছি এবং উপরের উদাহরণে লিংক ট্যাগ ব্যবহার করে যুক্ত করেছি: printWindow.docament.write ('<html> <শিরোনাম << শিরোনাম) ডিআইভি বিষয়বস্তু </ শিরোনাম> '); printWindow.docament.write ('<লিঙ্ক rel = "স্টাইলশিট" href = "../ সিএসএস / মুদ্রণপিডিএফ.সি.এস" />'); মুদ্রণ উইন্ডো.ডোকামেন্ট.উইরাইট ('<< হেড << বডি>');
— প্রাইম_কোডার
2
কিছু মন্তব্য: 1) আপনার মুদ্রণের জন্য একটি বিশেষ স্টাইলশিট লাগবে না। আপনার বর্তমান স্টাইলশিটে এমন কিছু করুন: @ মিডিয়া প্রিন্ট {.পেজব্রেক {পৃষ্ঠা-বিরতি আগে: সর্বদা; la .বেলপিডিএফ {হরফ ওজন: গা bold়; হরফ-আকার: 20px; no .NnavPPdf {প্রদর্শন: কিছুই নয়; classes} এবং এই ক্লাসগুলি আপনার প্রয়োজন হিসাবে ব্যবহার করুন। 2)। লাইভ ("ক্লিক", ...) আমার কাজ করে না, তাই আমি পরিবর্তে .on ("ক্লিক", ...) ব্যবহার করি।
— ডেভিডসন লিমা
1
@ ডেভিডসনলিমা এই কোডটি নতুন উইন্ডো তৈরি করেছে যা পুরানো উইন্ডো সিএসএস দেখতে পাবে না। এ কারণেই এটি সিএসএসকে "উপেক্ষা" করছে, এটি উপেক্ষা করছে না, কেবল নতুন উইন্ডোতে এটি লোড করা হয়নি। কেবল এটি মাথায় লোড করুন এবং এটি রেন্ডারিং হবে।
— লুকাস লিসিস
1
অ্যাঙ্গুলার দিয়ে যদি কেউ এটিকে ঘটানোর চেষ্টা করে তবে দয়া করে আপনার সিএসএস ফাইলকে সম্পদ ফোল্ডারে রেখে দিন।
— rgantla
16

আপনি অটোপ্রিন্ট () ব্যবহার করতে পারেন এবং আউটপুটটি 'ডেটাউরলাইনউইউন্ডো' তে সেট করতে পারেন:

function printPDF() {
    var printDoc = new jsPDF();
    printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
    printDoc.autoPrint();
    printDoc.output("dataurlnewwindow"); // this opens a new popup,  after this the PDF opens the print window view but there are browser inconsistencies with how this is handled
}
— মার্কো
সূত্র
1
আমি কৌতূহলী, এটি কি কখনও ওপি ব্যতিরেকে কাজ করেছে? কোডটি পড়া থেকে, আমি বুঝতে পারি যে এটি কেবল একটি আইডি রয়েছে এমন উপাদানগুলির সাথে কাজ করবে। এটি তার চেয়ে সম্ভবত খানিকটা জটিল, এই কাজটি কীভাবে করা যায় তা আমার কোনও ধারণা নেই।
— মাইকেল 15 '
14
আমি যা পর্যবেক্ষণ করেছি তা থেকে খুব হাস্যকরভাবে, এইচটিএমএল থেকে কেবলমাত্র তখনই কাজ করে যদি পরামিতি হিসাবে প্রেরিত উপাদানটিতে কোনও এইচটিএমএল না থাকে: কেবল সরল পাঠ্য সমর্থিত। কিন্ডা পুরো বিষয়টি ইমোকে মেরে ফেলে।
— মাইকেল
আমার জন্য নিখুঁতভাবে কাজ করেছেন। আপনি যে উপাদানটি পাস করতে চান তা প্রয়োজনীয়ভাবে আইডি থাকা প্রয়োজন। প্রতিলিপিটি যে নোডটিতে প্রবেশ করতে চেয়েছিল ঠিক সেভাবে এটি খুঁজে পেয়েছিল Additionally আপনি যদি কোডটিতে এই নির্দিষ্ট লাইনটি ছেড়ে যেতে চান তবে আপনাকে অটোপ্রিন্ট-প্লাগইন অন্তর্ভুক্ত করতে হবে।
— snarlx
13

আপনার যদি কোনও নির্দিষ্ট পৃষ্ঠার পিডিএফ ডাউনলোড করার প্রয়োজন হয় তবে ঠিক এটির মতো বোতাম যুক্ত করুন

<h4 onclick="window.print();"> Print </h4>

আপনার সমস্ত পৃষ্ঠাটি কেবল একটি ডিভিড নয়, মুদ্রণ করতে উইন্ডো.প্রিন্ট () ব্যবহার করুন

— ওয়াল মাহমুদ
সূত্র
2
এটির জন্য কেবল একটি সহজ সংযোজন, আপনি যদি কোনও আইফ্রেমে ডাউনলোডযোগ্য পিডিএফ তৈরি করতে চান, তবে বিকাশকারী কনসোলটি ব্যবহার করুন: document.querySelector("#myIframe").contentWindow.print()
— ioCron
11

উল্লিখিত হিসাবে, আপনার জেএসপিডিএফ এবং এইচটিএমএল 2 ক্যানভাস ব্যবহার করা উচিত । আমি জেএসপিডিএফ-র ইস্যুগুলির মধ্যে একটি ফাংশনও পেয়েছি যা আপনার পিডিএফকে একাধিক পৃষ্ঠায় স্বয়ংক্রিয়ভাবে বিভক্ত করে তোলে ( উত্স )

function makePDF() {

    var quotes = document.getElementById('container-fluid');

    html2canvas(quotes, {
        onrendered: function(canvas) {

        //! MAKE YOUR PDF
        var pdf = new jsPDF('p', 'pt', 'letter');

        for (var i = 0; i <= quotes.clientHeight/980; i++) {
            //! This is all just html2canvas stuff
            var srcImg  = canvas;
            var sX      = 0;
            var sY      = 980*i; // start 980 pixels down for every new page
            var sWidth  = 900;
            var sHeight = 980;
            var dX      = 0;
            var dY      = 0;
            var dWidth  = 900;
            var dHeight = 980;

            window.onePageCanvas = document.createElement("canvas");
            onePageCanvas.setAttribute('width', 900);
            onePageCanvas.setAttribute('height', 980);
            var ctx = onePageCanvas.getContext('2d');
            // details on this usage of this function: 
            // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
            ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

            // document.body.appendChild(canvas);
            var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

            var width         = onePageCanvas.width;
            var height        = onePageCanvas.clientHeight;

            //! If we're on anything other than the first page,
            // add another page
            if (i > 0) {
                pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
            }
            //! now we declare that we're working on that page
            pdf.setPage(i+1);
            //! now we add content to that page!
            pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));

        }
        //! after the for loop is finished running, we save the pdf.
        pdf.save('test.pdf');
    }
  });
}
— BaptWaels
সূত্র
3
এটি চিত্রগুলিতে রূপান্তর করে না
— প্রবস্কি
1
উত্তরের জন্য ধন্যবাদ, আপনি কীভাবে এটি 4 পৃষ্ঠার ফর্ম্যাটে রাখবেন সে সম্পর্কে কোনও ইঙ্গিত দিতে পারেন?
— জোহনেসমেটভোসায়ান
3
এটি সত্যিকারের ভাল ভেক্টর পিডিএফ তৈরি করে না, এটি ক্যানভাসের সাথে অনেকগুলি বিটম্যাপ তৈরি করে এবং চিত্র হিসাবে তাদের স্ট্যাক করে।
— ফলাফলটির
6

একটি উপায় হ'ল উইন্ডো.প্রিন্ট () ফাংশন ব্যবহার করা। যার কোনও লাইব্রেরির দরকার নেই

পেশাদাররা

1. কোন বাহ্যিক গ্রন্থাগার প্রয়োজন।

2. আমরা শরীরের শুধুমাত্র নির্বাচিত অংশগুলি মুদ্রণ করতে পারি।

3. কোন CSS বিরোধ এবং জেএস সমস্যা নেই।

4. কোর এইচটিএমএল / জেএস কার্যকারিতা

--- কেবল কোড নীচে যুক্ত করুন

সিএসএস টু

@media print {
        body * {
            visibility: hidden; // part to hide at the time of print
            -webkit-print-color-adjust: exact !important; // not necessary use         
               if colors not visible
        }

        #printBtn {
            visibility: hidden !important; // To hide 
        }

        #page-wrapper * {
            visibility: visible; // Print only required part
            text-align: left;
            -webkit-print-color-adjust: exact !important;
        }
    }

জেএস কোড - বিটিএন ক্লিকে বেভল ফাংশন কল করুন

$scope.printWindow = function () {
  window.print()
}

দ্রষ্টব্য: ব্যবহার করুন! প্রতিটি CSS অবজেক্টে গুরুত্বপূর্ণ

উদাহরণ - 

.legend  {
  background: #9DD2E2 !important;
}
— রোহিত পার্টে
সূত্র
ব্রাউজারগুলির মুদ্রণ ফাংশনে সমস্যা আছে। ব্যবহারকারীদের মুদ্রণ দর্শন (মার্জিন, পৃষ্ঠার আকার এবং আরও অনেক কিছু) জন্য সাধারণত ডিফল্ট বিকল্প নির্বাচন করা থাকে। অতএব, প্রশিক্ষণপ্রাপ্ত ব্যবহারকারী ছাড়া প্রয়োজনীয় স্টাইলিং সহ প্রয়োজনীয় পিডিএফ তৈরি করা খুব কঠিন, এটি আরও জটিল এবং প্রায় অসম্ভব ...
— রহমত আলী
4

আমি CSS রেন্ডারিংয়ের জন্য jspdf এবং html2 ক্যানভাস ব্যবহার করি এবং আমি নির্দিষ্ট ডিভের সামগ্রী রফতানি করি কারণ এটি আমার কোড

$(document).ready(function () {
    let btn=$('#c-oreder-preview');
    btn.text('download');
    btn.on('click',()=> {

        $('#c-invoice').modal('show');
        setTimeout(function () {
            html2canvas(document.querySelector("#c-print")).then(canvas => {
                //$("#previewBeforeDownload").html(canvas);
                var imgData = canvas.toDataURL("image/jpeg",1);
                var pdf = new jsPDF("p", "mm", "a4");
                var pageWidth = pdf.internal.pageSize.getWidth();
                var pageHeight = pdf.internal.pageSize.getHeight();
                var imageWidth = canvas.width;
                var imageHeight = canvas.height;

                var ratio = imageWidth/imageHeight >= pageWidth/pageHeight ? pageWidth/imageWidth : pageHeight/imageHeight;
                //pdf = new jsPDF(this.state.orientation, undefined, format);
                pdf.addImage(imgData, 'JPEG', 0, 0, imageWidth * ratio, imageHeight * ratio);
                pdf.save("invoice.pdf");
                //$("#previewBeforeDownload").hide();
                $('#c-invoice').modal('hide');
            });
        },500);

        });
});
— গজলেঃ জাভেরি
সূত্র
এটি কাজ করছে তবে এটি সামগ্রীটিকে চিত্রে রূপান্তর করছে
— সামাদ
এছাড়াও, কীভাবে পৃষ্ঠা বিরতি সেট করবেন যাতে সামগ্রী / চিত্রটি নতুন পৃষ্ঠায় প্রিন্ট হবে যদি এটি বর্তমান পৃষ্ঠায় ফিট না করে?
— শেখর শীট
4
  • কোনও অবক্ষয় নেই, খাঁটি জেএস
  • সিএসএস বা চিত্রগুলি যুক্ত করতে - আপেক্ষিক ইউআরএল ব্যবহার করবেন না, পুরো ইউআরএল http://...domain.../path.cssবা তাই ব্যবহার করুন । এটি পৃথক এইচটিএমএল ডকুমেন্ট তৈরি করে এবং এটিতে মূল বিষয়টির কোনও প্রসঙ্গ নেই।
  • আপনি বেস 64 হিসাবে চিত্রগুলি এম্বেড করতে পারেন

এটি এখন বছরের পর বছর ধরে আমার সেবা করেছে:

export default function printDiv({divId, title}) {
  let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');

  mywindow.document.write(`<html><head><title>${title}</title>`);
  mywindow.document.write('</head><body >');
  mywindow.document.write(document.getElementById(divId).innerHTML);
  mywindow.document.write('</body></html>');

  mywindow.document.close(); // necessary for IE >= 10
  mywindow.focus(); // necessary for IE >= 10*/

  mywindow.print();
  mywindow.close();

  return true;
}
— লুকাস লাইসিস
সূত্র
1
এটির সমস্যাটি হ'ল পিডিএফ এতে কোনও CSS প্রভাব ফেলবে না।
— শাদাব ফয়েজ
@ শাদাবফাইজ এটি করবে তবে এটি মূল উইন্ডোর মতো হতে পারে না। আপনি এখনও এই এইচটিএমএল কাস্টম সিএসএস যোগ করতে পারেন।
— লুকাস লিসিস
হ্যাঁ। আপনার সাথে ইগ্রি উইন্ডোতে সিএসএস যুক্ত করতে পারেন তবে পিডিএফ ফাইলটি ফলাফল কীভাবে প্রিন্ট করবেন?
— মিরকো সিয়ানফারানী
1
যদিও চিত্রগুলি রেন্ডার করে না।
— জান পি পি
1
আমি এটা ভালোবাসি! কিছু টুইট এখানে এবং সেখানে ভাল লাগছে। এবং একটি ছোট জিনিস অতিরিক্ত স্পেসিংয়ের <body >এটির প্রয়োজন হয় না: পি
— ফিল রোগেনবাক
2

আপনি যদি কোনও টেবিল রফতানি করতে চান তবে আপনি শিল্ড ইউআই গ্রিড উইজেট সরবরাহ করেছেন এই রফতানি নমুনাটি একবার দেখে নিতে পারেন ।

এটি কনফিগারেশনটি এভাবে প্রসারিত করে করা হয়:

...
exportOptions: {
    proxy: "/filesaver/save",
    pdf: {
        fileName: "shieldui-export",
        author: "John Smith",
        dataSource: {
            data: gridData
        },
        readDataSource: true,
        header: {
            cells: [
                { field: "id", title: "ID", width: 50 },
                { field: "name", title: "Person Name", width: 100 },
                { field: "company", title: "Company Name", width: 100 },
                { field: "email", title: "Email Address" }
            ]
        }
    }
}
...
— ভ্লাদিমির জর্জিভ
সূত্র
"পিডিএফ রফতানি করুন" কার্যকারিতার ফলে খালি পিডিএফ ডকুমেন্ট তৈরি হয়েছিল।
— রিচার্ড ন্যালিজেনস্কি
সম্ভবত আপনার শেষের দিকে ভুল কনফিগারেশন ... আপনি যদি চান, ঝালদাই ট্যাগ দিয়ে একটি প্রশ্ন পোস্ট করুন
— ভ্লাদিমির জর্জিভ
2

PdfMake.js এবং এই গিস্ট ব্যবহার করুন ।

( এইচটিএমএল-টু পিডিএফএমকে প্যাকেজটির লিঙ্কের সাথে আমি এখানে গিস্টটি পেয়েছি , যা আমি আপাতত ব্যবহার না করে শেষ করি))

npm install pdfmakeগিস্ট ইন পরে এবং সংরক্ষণ করে htmlToPdf.jsআমি এটি এটি ব্যবহার করি:

const pdfMakeX = require('pdfmake/build/pdfmake.js');
const pdfFontsX = require('pdfmake-unicode/dist/pdfmake-unicode.js');
pdfMakeX.vfs = pdfFontsX.pdfMake.vfs;
import * as pdfMake from 'pdfmake/build/pdfmake';
import htmlToPdf from './htmlToPdf.js';

var docDef = htmlToPdf(`<b>Sample</b>`);
pdfMake.createPdf({content:docDef}).download('sample.pdf');

মন্তব্য:

  • আমার ব্যবহারের ক্ষেত্রে হ'ল মার্কডাউন ডকুমেন্ট ( মার্কডাউন-এটি সহ ) থেকে প্রাসঙ্গিক এইচটিএমএল তৈরি করা এবং পরে পিডিএফ তৈরি করা এবং ব্রাউজার থেকে সমস্ত বাইনারি সামগ্রী (যা আমি pdfMakeএর getBuffer()ফাংশন দিয়ে পেতে পারি ) আপলোড করি । উত্পন্ন পিডিএফ আমি চেষ্টা করেছি এমন অন্যান্য সমাধানগুলির চেয়ে এই জাতীয় এইচটিএমএলটির জন্য খুব ভাল।
  • jsPDF.fromHTML()গ্রহণযোগ্য উত্তরের প্রস্তাবিত ফলাফল থেকে আমি অসন্তুষ্ট , কারণ সমাধানটি আমার এইচটিএমএলে বিশেষ অক্ষরগুলি দ্বারা সহজেই বিভ্রান্ত হয়ে যায় যা স্পষ্টতই এক ধরণের মার্কআপ হিসাবে ব্যাখ্যা করা হয় এবং ফলস্বরূপ পিডিএফটিকে পুরোপুরি গণ্ডগোল করে দেয়।
  • ক্যানভাস ভিত্তিক সমাধানগুলি (অবচিত jsPDF.from_html()ফাংশনটির মতো, গৃহীত উত্তর থেকে যেটির সাথে বিভ্রান্ত না করা) আমার পক্ষে বিকল্প নয় কারণ আমি চাই যে উত্পন্ন পিডিএফটিতে লেখাটি পেস্টযোগ্য হবে, তবে ক্যানভাস ভিত্তিক সমাধান বিটম্যাপ ভিত্তিক পিডিএফ তৈরি করে।
  • এমডি-টু-পিডিএফের মতো পিডিএফ রূপান্তরকারীগুলির জন্য সরাসরি মার্কডাউন কেবল সার্ভার সাইড এবং আমার পক্ষে কাজ করবে না।
  • ব্রাউজারের মুদ্রণ কার্যকারিতাটি ব্যবহার করা আমার পক্ষে কাজ করবে না কারণ আমি উত্পন্ন পিডিএফ প্রদর্শন করতে চাই না তবে এর বাইনারি সামগ্রী আপলোড করতে চাই।
— ilmiacs
সূত্র
আমি যদি কোডটি সঠিকভাবে পড়ে থাকি তবে এটি সিএসএস সীমান্ত শৈলীগুলি সমর্থন করে না (যেমন টেবিলগুলির উপরে), সঠিক?
— নিনজাগেকো
1

আমি একটি ডিভি থেকে গতিশীলভাবে তৈরি টেবিলগুলি মুদ্রণের জন্য জেএসপিডিএফ পেতে সক্ষম হয়েছি।

$(document).ready(function() {

        $("#pdfDiv").click(function() {

    var pdf = new jsPDF('p','pt','letter');
    var specialElementHandlers = {
    '#rentalListCan': function (element, renderer) {
        return true;
        }
    };

    pdf.addHTML($('#rentalListCan').first(), function() {
        pdf.save("caravan.pdf");
    });
    });
});

ক্রোম এবং ফায়ারফক্সের সাথে দুর্দান্ত কাজ করে ... ফর্ম্যাটিং সবই আইই তে ফুঁকছে।

আমি এগুলিও অন্তর্ভুক্ত করেছি:

<script src="js/jspdf.js"></script>
    <script src="js/jspdf.plugin.from_html.js"></script>
    <script src="js/jspdf.plugin.addhtml.js"></script>
    <script src="//mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
    <script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
    <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
    <script type="text/javascript" src="./libs/Blob.js/Blob.js"></script>
    <script type="text/javascript" src="./libs/deflate.js"></script>
    <script type="text/javascript" src="./libs/adler32cs.js/adler32cs.js"></script>

    <script type="text/javascript" src="js/jspdf.plugin.addimage.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.sillysvgrenderer.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>
— Wasskinny
সূত্র
2
আপনি কীভাবে এইচটিএমএল পাস করেন তার উদাহরণ পোস্ট করতে পারেন
— এরম
তবে আপনার কোডটি <স্ক্রিপ্ট src = " html2canvas.hertzen.com/build/html2canvas.js " > < /… > যার অর্থ এটি ইন্টারনেট দরকার?
— এরম
1
@ ইমাম আপনি ফাইলটি ডাউনলোড করতে পারেন।
— এডুয়ার্ডো কুওমো
0

ডিভিডি পিডিএফ হিসাবে ক্যাপচার করতে আপনি https://grabz.it সমাধান ব্যবহার করতে পারেন । এটি একটি জাভাস্ক্রিপ্ট এপিআই পেয়েছে যা সহজ এবং নমনীয় এবং আপনাকে একটি একক এইচটিএমএল উপাদান যেমন ডিভ বা স্প্যানের বিষয়বস্তু ক্যাপচার করতে দেয়

এটি বাস্তবায়নের জন্য আপনাকে প্রথমে একটি অ্যাপ কী এবং গোপনীয়তা অর্জন করতে হবে এবং (ফ্রি) এসডিকে ডাউনলোড করতে হবে।

এবং এখন একটি উদাহরণ।

ধরা যাক আপনার এইচটিএমএল রয়েছে:

<div id="features">
    <h4>Acme Camera</h4>
    <label>Price</label>$399<br />
    <label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

বৈশিষ্ট্য আইডির আওতায় যা আছে তা ক্যাপচার করতে আপনার প্রয়োজন:

//add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>

দয়া করে মনে রাখবেন target: #feature। #featureআপনি কি পূর্ববর্তী উদাহরণের মতো সিএসএস নির্বাচক? এখন, পৃষ্ঠাটি লোড করা হলে একটি চিত্রের স্ক্রিনশটটি এখন স্ক্রিপ্ট ট্যাগের মতো একই স্থানে তৈরি করা হবে, এতে ডিভ বৈশিষ্ট্যগুলির সমস্ত বিষয়বস্তু থাকবে এবং অন্য কিছুই থাকবে না।

ডিভ-স্ক্রিনশট প্রক্রিয়াটিতে আপনি যা করতে পারেন তা হ'ল অন্যান্য কনফিগারেশন এবং কাস্টমাইজেশন, দয়া করে এগুলি এখানে দেখুন

— জনি
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.