كيفية عمل نموذج استمارة او وثيقة لطباعتها 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

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية