HTML හි PDF කාවැද්දීමට නිර්දේශිත ක්‍රමය?

HTML හි PDF කාවැද්දීමට නිර්දේශිත ක්‍රමය කුමක්ද?

• iFrame?
• වස්තුව?
• කාවැද්දූවාද?

ඇඩෝබි ඒ ගැන පවසන්නේ කුමක්ද?

මගේ නඩුවේදී, පී.ඩී.එෆ් උත්පාදනය වන්නේ මැස්සන් මත බැවින් එය පිසීමට පෙර එය තෙවන පාර්ශවීය විසඳුමකට උඩුගත කළ නොහැක.

බොහෝ විට හොඳම ප්‍රවේශය වන්නේ PDF.JS පුස්තකාලය භාවිතා කිරීමයි . තෙවන පාර්ශවීය ප්ලගීන නොමැතිව PDF ලේඛන සඳහා එය පිරිසිදු HTML5 / JavaScript විදැහුම්කරුවෙකි.

මාර්ගගත නිරූපණය: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js

මෙය ඉක්මන්, පහසු, කාරණයට වන අතර කිසිදු තෙවන පාර්ශවීය ස්ක්‍රිප්ට් අවශ්‍ය නොවේ:

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

යාවත්කාලීන කිරීම (1/2018):

ඇන්ඩ්‍රොයිඩ් හි ක්‍රෝම් බ්‍රව්සරය තවදුරටත් PDF කාවැද්දීම සඳහා සහය නොදක්වයි. ගූගල් ඩ්‍රයිව් පී.ඩී.එෆ්. නරඹන්නා භාවිතා කිරීමෙන් ඔබට මෙය වටහා ගත හැකිය

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

මේ සඳහා ඔබට ගූගල් පී.ඩී.එෆ්. මා දන්නා තරමින් එය නිල ගූගල් අංගයක් නොවේ (මම මේ ගැන වැරදියි ද?), නමුත් එය මට ඉතා හොඳින් හා සුමටව ක්‍රියා කරයි. ඔබට පෙර කොතැනක හෝ ඔබේ PDF උඩුගත කළ යුතු අතර එහි URL භාවිතා කරන්න:

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

වැදගත්ම දෙය නම් එයට ෆ්ලෑෂ් ප්ලේයරයක් අවශ්‍ය නොවීම, එය ජාවාස්ක්‍රිප්ට් භාවිතා කිරීමයි.

විමසුම් දාමයේ විකල්ප කිහිපයක් පසු කිරීමෙන් බ්‍රව්සරයේ PDF දිස්වන ආකාරය පිළිබඳ ඔබට යම් පාලනයක් ඇත. IE8 හි එය ක්‍රියාත්මක නොවන බව මා තේරුම් ගන්නා තෙක් මෙම වැඩ කිරීම ගැන මම සතුටු වෙමි. :(

එය ක්‍රෝම් 9 සහ ෆයර්ෆොක්ස් 3.6 හි ක්‍රියා කරයි, නමුත් අයිඊ 8 හි එය පෙන්වන්නේ “පී.ඩී.එෆ්. පෙන්විය නොහැකි නම් ඔබේ දෝෂ පණිවිඩය මෙහි ඇතුළත් කරන්න.”

ඉහත කිසිදු බ්‍රව්සරයක පැරණි අනුවාදයන් මම තවම අත්හදා බලා නැත. නමුත් ඕනෑම කෙනෙකුට උදව් කළහොත් මා සතුව ඇති කේතය මෙන්න. මෙය විශාලනය 85% දක්වා සකසයි, අනුචලන තීරු, මෙවලම් තීරු සහ නව කවුළු ඉවත් කරයි. IE හි වැඩ කරන යමක් මට හමු වුවහොත් මම මගේ ලිපිය යාවත්කාලීන කරමි.

<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>

දෙකම භාවිතා <object>සහ <embed>ඔබ බ්රවුසරය ගැළපුම වඩා පුළුල් පළල ලබා දෙනු ඇත.

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
    </embed>
</object>

ImageMagick හරහා එය PNG බවට පරිවර්තනය කර PNG ප්‍රදර්ශනය කරන්න (ඉක්මන් හා අපිරිසිදු).

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '<img src="$dir$name.png" />';
?>

ඔබට ඉක්මන් විසඳුමක් අවශ්‍ය නම්, හරස් බ්‍රව්සරයේ PDF බැලීමේ ගැටළු වළක්වා ගැනීමට අවශ්‍ය නම් මෙය හොඳ විකල්පයකි, සහ PDF යනු පිටුවක් හෝ දෙකක් පමණක් නම්. ඇත්ත වශයෙන්ම, ඔබේ වෙබ් සේවාදායකයේ ImageMagick ස්ථාපනය කළ යුතුය (ඒ සඳහා Ghostscript අවශ්‍ය වේ), මෙය විකල්ප සත්කාරක පරිසරයක නොතිබිය හැකි විකල්පයකි. වැඩ කරන (imagick හැඳින්වේ) සොයන PHP ප්ලගිනය ද ඇත මේ වගේ නමුත්, එය ම විශේෂ අවශ්යතා තියෙන්නේ ඇත.

මෙම කේතය ගැන සොයා බලන්න- පී.ඩී.එෆ්

<!-- Embed PDF File -->
<object data="YourFile.pdf" type="application/x-pdf" title="SamplePdf" width="500" height="720">
    <a href="YourFile.pdf">shree</a> 
</object>

FDView ඒකාබද්ධ PDF2SWF (මත පදනම් වූ ම xpdf සමග) swf ඔබ ඔබේ සේවාදායකය තුල පියාසර තහනම් මත PDF ගොනු පරිවර්තනය හා ඉස්මතු කරලීම හැකි නිසා නරඹන්නාට.

xpdf පරිපූර්ණ PDF පරිවර්තකයක් නොවේ. ඔබට වඩා හොඳ ප්‍රති results ල අවශ්‍ය නම් PDF ලිපිගොනු වෙනත් ආකෘති බවට පරිවර්තනය කිරීමට Ghostview හට යම් හැකියාවක් ඇති අතර එමඟින් ඔබට පහසුවෙන් ෆ්ලෑෂ් නරඹන්නෙකු ගොඩනගා ගත හැකිය.

නමුත් සරල PDF ලේඛන සඳහා, FDView සාධාරණව ක්‍රියා කළ යුතුය.

අපගේ ගැටළුව වන්නේ නීතිමය හේතූන් මත දෘඩ තැටියේ තාවකාලිකව PDF ගබඩා කිරීමට අපට ඉඩ නොදීමයි . ඊට අමතරව, බ්‍රව්සරයේ පෙරදසුනක් ලෙස PDF දර්ශණය කිරීමේදී සම්පූර්ණ පිටුව නැවත පූරණය නොකළ යුතුය.

මුලින්ම අපි උත්සාහ කළේ PDF.jS. එය ෆයර්ෆොක්ස් සහ ක්‍රෝම් සඳහා නරඹන්නා තුළ බේස් 64 සමඟ වැඩ කළේය. කෙසේ වෙතත්, එය අපගේ PDF සඳහා පිළිගත නොහැකි ලෙස මන්දගාමී විය. IE / Edge කිසිසේත් ක්‍රියා කළේ නැත.

එබැවින් අපි එය HTML වස්තු ටැගයක Base64 නූලකින් උත්සාහ කළෙමු. මෙය නැවතත් IE / Edge සඳහා ක්‍රියා නොකරයි (සමහර විට PDF.js හා සමාන ගැටළුවක් විය හැක). Chrome / Firefox / Safari හි නැවතත් ගැටළුවක් නොමැත. අපි දෙමුහුන් විසඳුමක් තෝරාගත්තේ එබැවිනි. IE / Edge අපි IFrame එකක් භාවිතා කරන අතර අනෙක් සියලුම බ්‍රව්සර් සඳහා වස්තු-ටැගය භාවිතා කරමු.

IFrame විසඳුම ඇත්ත වශයෙන්ම Chrome සහ co සඳහාද ක්‍රියා කරයි. අපි ක්‍රෝම් සඳහා මෙම විසඳුම භාවිතා නොකිරීමට හේතුව පී.ඩී.එෆ් නිවැරදිව දර්ශනය වුවද, ඔබ පෙරදසුනෙහි "බාගත කිරීම" මත ක්ලික් කළ විගසම ක්‍රෝම් සේවාදායකයට නව ඉල්ලීමක් කරයි . අවශ්‍ය සැඟවුණු ක්ෂේත්‍රය pdfHelperTransferData (PDF උත්පාදනය සඳහා අවශ්‍ය අපගේ පෝරම දත්ත යැවීම සඳහා) තවදුරටත් සැකසෙන්නේ PDF එක IFrame එකක දර්ශනය වන බැවිනි. මෙම අංගය සඳහා / දෝෂය බලන්නPDF එකක් බාගත කිරීමේදී ක්‍රෝම් ඉල්ලීම් දෙකක් යවයි (ඒවායින් එකක් අවලංගු කරයි) .

දැන් ගැටළුව IE9 සහ IE10 දරුවන් තවමත් පවතී. මේ සඳහා අපි පෙරදසුන විසඳුමක් අතහැර දමා පරිශීලකයාට බාගත කිරීමක් ලෙස පෙරදසුන බොත්තම ක්ලික් කිරීමෙන් ලේඛනය යවන්න (පෙරදසුන වෙනුවට). අපි බොහෝ උත්සාහ කර ඇති නමුත් අපට විසඳුමක් සොයා ගත හැකි වුවද මෙම කුඩා පරිශීලකයින් සඳහා අමතර වෑයමක් දැරීම වටී. බාගත කිරීම සඳහා ඔබට අපගේ විසඳුම මෙතැනින් සොයාගත හැකිය: IFrame සමඟ නැවුම් නොකර PDF බාගන්න .

අපගේ ජාවාස්ක්‍රිප්ට්:

var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
        // Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
        var form = document.getElementById('pdf-helper-form');
        $("#pdfHelperTransferData").val(transferData);
        form.target = "iframe-pdf-shower";
        form.action = "serverSideFunctonWhichWritesPdfinResponse";
        form.submit();
 } else {
        // Case non IE use Object tag instead of iframe
        $.ajax({
            url: "serverSideFunctonWhichRetrivesPdfAsBase64",
            type: "post",
            data: { downloadHelperTransferData: transferData },
            success: function (result) {
                $("#object-pdf-shower").attr("data", result);
            }
        })
 }

අපගේ HTML:

<div id="pdf-helper-hidden-container" style="display:none">
   <form id="pdf-helper-form" method="post">
        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
   </form>
</div>

<div id="pdf-wrapper" class="modal-content">
    <iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
    <object id="object-pdf-shower" type="application/pdf"></object>
</div>

IE / Edge සඳහා බ්‍රව්සර් වර්ගය පරීක්ෂා කිරීම සඳහා මෙහි බලන්න: ජාවාස්ක්‍රිප්ට් භාවිතයෙන් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් (අයිඊ) සහ මයික්‍රොසොෆ්ට් එජ් හඳුනා ගන්නේ කෙසේද? මෙම සොයාගැනීම් වෙනත් කෙනෙකුට කාලය ඉතිරි කර දෙනු ඇතැයි මම බලාපොරොත්තු වෙමි.

සුරකින ලද පීඩීඑෆ් හි සාපේක්ෂ පිහිටීම ඔබට මේ ආකාරයෙන් භාවිතා කළ හැකිය:

උදාහරණ 1

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

උදාහරණ 2

<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>

1. ඔබේ PDF රඳවා තබා ගැනීමට කන්ටේනරයක් සාදන්න

   <div id="example1"></div>

2. කියන්න PDFObject වන PDF ඇතුළත් කිරීමට, සහ කොහේද එය සටහන් කිරීමට

   <script src="/js/pdfobject.js"></script>
   <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>

3. මානයන්, මායිම, ආන්තිකය ඇතුළු දෘශ්‍ය මෝස්තර නියම කිරීමට ඔබට විකල්පයක් ලෙස CSS භාවිතා කළ හැකිය.

   <style>
   .pdfobject-container { height: 500px;}
   .pdfobject { border: 1px solid #666; }
   </style>

මූලාශ්‍රය: https://pdfobject.com/

ඔබේ ලේඛන ඔවුන්ගේ සේවාදායකයේ සංග්‍රහ කිරීමට Scribd තවදුරටත් ඔබට අවශ්‍ය නොවේ. ඔබ ඔවුන් සමඟ ගිණුමක් නිර්මාණය කරන්නේ නම් ඔබට ප්‍රකාශක හැඳුනුම්පතක් ලැබෙනු ඇත. ඔබගේ සේවාදායකයේ ගබඩා කර ඇති PDF ගොනු පූරණය කිරීමට අවශ්‍ය වන්නේ ජාවාස්ක්‍රිප්ට් කේත පේළි කිහිපයක් පමණි.

වැඩි විස්තර සඳහා, සංවර්ධක මෙවලම් බලන්න .

<object width="400" height="400" data="helloworld.pdf"></object>

ImageMagick හි convertවිධානය භාවිතා කරමින් PdfToImageServlet .

භාවිත උදාහරණය: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>

මෙම මම කළේ මාර්ගය වන්නේ AXIOS හා Vue.js:

        axios({
            url: `urltoPDFfile.pdf`,
            method: 'GET',
            headers: headers,
            responseType: 'blob'
        })
        .then((response) => {
            this.urlPdf = URL.createObjectURL(response.data)
        })
        .catch((error) => {
            console.log('ERROR   ', error)
        })

HTML වෙත ගතිකව urlPDF එක් කරන්න:

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>

ඔබ සලකා බැලිය යුතු එක් විකල්පයක් වන්නේ සැලකිය යුතු පී.ඩී.එෆ්.
ඔබ පී.ඩී.එෆ්.

පහත දැක්වෙන iframeඕනෑම html එකකට ඇතුළත් කර ප්‍රති results ල භුක්ති විඳින්න:

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>

ගොනුව බ්‍රව්සරයට ප්‍රවාහනය කිරීම සඳහා, .NET 2.0 භාවිතා කරමින් බ්‍රවුසරයට ද්විමය ලෙස PDF ගොනුවක් ප්‍රවාහනය කරන්නේ කෙසේද යන්න බලන්න - සුළු වෙනස්කම් සහිතව, ඔබ ගොනු පද්ධතියෙන් ගොනුවක් සේවය කරන්නේද යන්න මෙය ක්‍රියාත්මක වන බව සලකන්න. හෝ ගතිකව ජනනය වේ.

ඒ සමඟම, යොමු කරන ලද එම්එස්ඩීඑන් ලිපිය ලෝකය පිළිබඳ තරමක් සරල දෘෂ්ටියක් ගනී, එබැවින් ඔබට HTTPS හරහා බ්‍රවුසරයට පී.ඩී.එෆ් සාර්ථකව ප්‍රවාහය කියවීමට අවශ්‍ය විය හැකි අතර ඔබට සැපයීමට අවශ්‍ය සමහර ශීර්ෂයන් සඳහා.

එම ප්‍රවේශය භාවිතා කරමින්, යා හැකි හොඳම ක්‍රමය iframe වේ. ගොනුව ප්‍රවාහනය කරන එක් වෙබ් srcආකෘතියක් තබා, පසුව එහි ආකෘතියේ පළමු ආකෘතියට සකසා ඇති iframe වෙනත් පිටුවක තබන්න .

මට ප්‍රතික්‍රියා සමඟ පී.ඩී.එෆ් පෙරදසුන් කිරීමට සිදු විය, එබැවින් පුස්තකාල කිහිපයක් උත්සාහ කිරීමෙන් පසු මගේ ප්‍රශස්ත විසඳුම වූයේ දත්ත ලබාගෙන එය එබ්බ කිරීමයි.

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

1. ආදාන PDF බයිට් වල පිපිරීමක් සාදන්න
2. භාවිතය, iframe හා PDF.js සමග කළහ මෙම හරස් වෙබ් බ්රව්සරය සලසන වක් මගක්

Iframe සඳහා වන URI මේ වගේ දෙයක් විය යුතුයි:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

දැන් එෆ්එෆ්, ක්‍රෝම්, අයිඊ 11, සහ එජ් යන සියල්ලම යූආර්එල් හි සම්මත බ්ලොබ් යූආර්අයි හරහා සම්මත කරන ලද අයිෆ්‍රේම් හි නරඹන්නා තුළ පී.ඩී.එෆ්.

ඔබට තනිවම PDF.JS සත්කාරකත්වය සැපයීමට අවශ්‍ය නැතිනම්, ඔබට DocDroid උත්සාහ කළ හැකිය . එය ගූගල් ඩ්‍රයිව් පී.ඩී.එෆ් නරඹන්නාට සමාන නමුත් අභිරුචි වෙළඳ නාමකරණයට ඉඩ දෙයි.

PDF සඳහා iFrame භාවිතා කරන්න.

මගේ React.js යෙදුමේ මට නිශ්චිත අවශ්‍යතා තිබුණි, විසඳුම් මිලියන ගණනක් උත්සාහ කළ නමුත් iFrame එකකින් අවසන් විය :) වාසනාව!

මෙය ඉතා හොඳින් ක්‍රියාත්මක වන බව මට පෙනී ගිය අතර බ්‍රව්සරය එය ෆයර්ෆොක්ස් මගින් හසුරුවයි. මම IE පරීක්ෂා කර නැත ...

<script>window.location='url'</script>