كيفية عمل نموذج استمارة او وثيقة لطباعتها Javascript

Ahmed Oussama Moumni · 17 أغسطس 2022

السلام عليكم ورحمة الله وبركاته ,

احتاج الى طريقة لعمل نموذج استمارة او وصفة طبية تحتوي على بيانات ديناميكية ثم طباعتها .

مع العلم اني استعمل مكتبة electrion.js

Ahmed Sadek Elamine Touahria · 29 أغسطس 2022

1 - تحميل PDF.js :

في مجلد ROOT لمشروعك ، قم بإنشاء مجلد يسمى public. هذا هو المكان الذي سنضع فيه ملفات PDF.js الخاصة بنا.

قم بتنزيل ملفات PDF.js من هنا واستخراجها في المجلد العام. لسهولة الاستخدام ، أعد تسمية المجلد الذي يمنحك إلى pdfjs فقط.

ستحتاج أيضًا إلى إخبار Electron بمكان الملفات الثابتة. يمكنك القيام بذلك عن طريق إضافة الكود التالي إلى package.json

"build": {
  "extraResources": ["./public/**"]
}

2- 4. قم بإنشاء viewer في Electron لفتح ملف PDF :

استبدل محتويات src / index.html بما يلي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel='stylesheet' href='./index.css'>
  </head>
  <body>

    <div class='picker'>
      <button id='myButton'>Select PDF to view</button>
    </div>

    <div class='viewer' id='viewer'>

    </div>

    <script>
      require('./renderer.js');
    </script>
  </body>
</html>

ستكون هذه هي واجهة المستخدم لتطبيقنا. نقوم بإنشاء زر لإظهار منتقي الملفات الأصلي ، وقمنا بإنشاء div ليحمل عارض PDF.js الخاص بنا. نربط أيضًا أنماط css الخاصة بنا.

قم بتحديث src / index.css إلى ما يلي:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

div.picker {
  width: 100%;
  height: 40px;

  background-color: #222222;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.viewer {
  width: 100%;
  height: calc(100% - 40px);
}

div.viewer iframe {
  width: 100%;
  height: 100%;
}

يضيف هذا بعض التخطيط الأساسي لمشروعنا ، ويخبر العارض بملء أكبر قدر ممكن من النافذة.

حان الوقت الآن لإضافة منطق JS الخاص بنا. قم بتحديث src / renderer.js إلى ما يلي:

const { dialog } = require('electron').remote;
const path = require('path');

// Add an event listener to our button.
document.getElementById('myButton').addEventListener('click', () => {

  // When the button is clicked, open the native file picker to select a PDF.
  dialog.showOpenDialog({
    properties: ['openFile'], // set to use openFileDialog
    filters: [ { name: "PDFs", extensions: ['pdf'] } ] // limit the picker to just pdfs
  }, (filepaths) => {

    // Since we only allow one file, just use the first one
    const filePath = filepaths[0];

    const viewerEle = document.getElementById('viewer');
    viewerEle.innerHTML = ''; // destroy the old instance of PDF.js (if it exists)

    // Create an iframe that points to our PDF.js viewer, and tell PDF.js to open the file that was selected from the file picker.
    const iframe = document.createElement('iframe');
    iframe.src = path.resolve(__dirname, `../public/pdfjs/web/viewer.html?file=${filePath}`);

    // Add the iframe to our UI.
    viewerEle.appendChild(iframe);
  })
})

عند النقر فوق الزر ، سيظهر منتقي الملفات الأصلي ويسمح لك بتحديد ملف PDF. بمجرد تحديده ، سيظهر عارض PDF.js مع فتح ملف PDF الذي حددته.

كيفية عمل نموذج استمارة او وثيقة لطباعتها Javascript

السؤال

Ahmed Oussama Moumni

1 جواب على هذا السؤال

Recommended Posts

Ahmed Sadek Elamine Touahria

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية