نیکسٹ جے ایس اور ایکسپریس جے ایس کے ساتھ تقریر کو پی ڈی ایف میں تبدیل کرنا

افلاطون کے ذریعہ دوبارہ شائع کیا گیا۔

فالونگ: 0

اسپیچ انٹرفیس ایک چیز کے زیادہ ہونے کے ساتھ، یہ کچھ چیزوں کو تلاش کرنے کے قابل ہے جو ہم تقریر کے تعامل کے ساتھ کر سکتے ہیں۔ جیسا کہ، کیا ہوگا اگر ہم کچھ کہہ سکیں اور اسے نقل کیا جائے اور ڈاؤن لوڈ کے قابل پی ڈی ایف کے طور پر باہر نکال دیا جائے؟

ٹھیک ہے، بگاڑنے والا الرٹ: ہم بالکل کر سکتے ہیں وہ کرو! ایسی لائبریریاں اور فریم ورک ہیں جن کو ہم ایک ساتھ جوڑ کر اس کو انجام دے سکتے ہیں، اور یہ وہی ہے جو ہم اس مضمون میں مل کر کرنے جا رہے ہیں۔

یہ وہ ٹولز ہیں جو ہم استعمال کر رہے ہیں۔

سب سے پہلے، یہ دو بڑے کھلاڑی ہیں: Next.js اور Express.js۔

Next.js رد عمل کے لیے اضافی فعالیتوں پر ٹیک، بشمول جامد سائٹس کی تعمیر کے لیے کلیدی خصوصیات۔ یہ بہت سے ڈویلپرز کے لیے ایک قابل رسائی ہے کیونکہ یہ باکس کے باہر جو کچھ پیش کرتا ہے، جیسے ڈائنامک روٹنگ، امیج آپٹیمائزیشن، بلٹ ان ڈومین اور سب ڈومین روٹنگ، تیز ریفریشز، فائل سسٹم روٹنگ، اور API روٹس… بہت سی، بہت سی دوسری چیزیں.

ہمارے معاملے میں، ہمیں یقینی طور پر اس کے لیے Next.js کی ضرورت ہے۔ API کے راستے ہمارے کلائنٹ سرور پر۔ ہم ایک ایسا راستہ چاہتے ہیں جو ٹیکسٹ فائل لے، اسے پی ڈی ایف میں تبدیل کرے، اسے ہمارے فائل سسٹم میں لکھے، پھر کلائنٹ کو جواب بھیجے۔

ایکسپریس.js ہمیں روٹنگ، HTTP مددگاروں اور ٹیمپلیٹنگ کے ساتھ ایک چھوٹی Node.js ایپ حاصل کرنے کی اجازت دیتا ہے۔ یہ ہمارے اپنے API کے لیے ایک سرور ہے، جس کی ہمیں ضرورت پڑے گی جب ہم چیزوں کے درمیان ڈیٹا کو پاس اور پارس کرتے ہیں۔

ہمارے پاس کچھ اور انحصار ہیں جو ہم استعمال کریں گے:

ردعمل-تقریر-تسلیم: تقریر کو متن میں تبدیل کرنے کے لیے ایک لائبریری، اسے React اجزاء کے لیے دستیاب کرانا۔
ریجنریٹر رن ٹائم: خرابیوں کا ازالہ کرنے کے لیے ایک لائبریری "regeneratorRuntime react-speech-recognition کا استعمال کرتے وقت Next.js میں ظاہر ہونے والی خرابی کی وضاحت نہیں کی گئی ہے
html-pdf-node: ایک HTML صفحہ یا عوامی URL کو PDF میں تبدیل کرنے کے لیے ایک لائبریری
محور: براؤزر اور Node.js دونوں میں HTTP درخواستیں کرنے کے لیے ایک لائبریری
سینگوں: ایک لائبریری جو کراس اوریجن ریسورس شیئرنگ کی اجازت دیتی ہے۔

قائم کرنے

پہلی چیز جو ہم کرنا چاہتے ہیں وہ دو پروجیکٹ فولڈرز بنانا ہے، ایک کلائنٹ کے لیے اور ایک سرور کے لیے۔ آپ جو چاہیں ان کا نام دیں۔ میں اپنا نام لے رہا ہوں۔ audio-to-pdf-client اور audio-to-pdf-serverبالترتیب.

کلائنٹ کی طرف Next.js کے ساتھ شروع کرنے کا تیز ترین طریقہ یہ ہے کہ اسے بوٹسٹریپ کریں۔ create-next-app. لہذا، اپنا ٹرمینل کھولیں اور اپنے کلائنٹ پروجیکٹ فولڈر سے درج ذیل کمانڈ چلائیں:

npx create-next-app client

اب ہمیں اپنے ایکسپریس سرور کی ضرورت ہے۔ ہم اسے حاصل کر سکتے ہیں۔ cd- سرور پروجیکٹ فولڈر میں داخل ہوں اور چلائیں۔ npm init کمانڈ. اے package.json فائل مکمل ہونے کے بعد سرور پروجیکٹ فولڈر میں بنائی جائے گی۔

ہمیں ابھی بھی اصل میں ایکسپریس انسٹال کرنے کی ضرورت ہے، تو آئیے اب اس کے ساتھ کرتے ہیں۔ npm install express. اب ہم ایک نیا بنا سکتے ہیں۔ index.js سرور پروجیکٹ فولڈر میں فائل کریں اور اس کوڈ کو وہاں چھوڑیں:

const express = require("express")
const app = express()

app.listen(4000, () => console.log("Server is running on port 4000"))

سرور چلانے کے لیے تیار ہیں؟

node index.js

ہمیں آگے بڑھنے کے لیے چند مزید فولڈرز اور ایک اور فائل کی ضرورت ہوگی:

ایک تخلیق کریں components کلائنٹ پروجیکٹ فولڈر میں فولڈر۔
ایک تخلیق کریں SpeechToText.jsx میں دائر components ذیلی فولڈر۔

اس سے پہلے کہ ہم مزید آگے بڑھیں، ہمارے پاس تھوڑی سی صفائی کرنی ہے۔ خاص طور پر، ہمیں پہلے سے طے شدہ کوڈ کو تبدیل کرنے کی ضرورت ہے۔ pages/index.js اس کے ساتھ فائل:

import Head from "next/head";
import SpeechToText from "../components/SpeechToText";

export default function Home() {
  return (
    <div className="home">
      <Head>
        <title>Audio To PDF</title>
        <meta
          name="description"
          content="An app that converts audio to pdf in the browser"
        />
        <link rel="icon" href="/ur/favicon.ico" />
      </Head>

      <h1>Convert your speech to pdf</h1>

      <main>
        <SpeechToText />
      </main>
    </div>
  );
}

درآمد شدہ SpeechToText جزو آخر کار سے برآمد کیا جائے گا۔ components/SpeechToText.jsx.

آئیے دیگر انحصار کو انسٹال کرتے ہیں۔

ٹھیک ہے، ہمارے پاس اپنی ایپ کا ابتدائی سیٹ اپ ختم ہو گیا ہے۔ اب ہم ان لائبریریوں کو انسٹال کر سکتے ہیں جو اس ڈیٹا کو ہینڈل کرتی ہیں جو ارد گرد سے گزر چکا ہے۔

ہم اپنے کلائنٹ کے انحصار کو اس کے ساتھ انسٹال کر سکتے ہیں:

npm install react-speech-recognition regenerator-runtime axios

ہمارے ایکسپریس سرور پر انحصار آگے ہے، تو آئیے cd سرور پروجیکٹ فولڈر میں جائیں اور ان کو انسٹال کریں:

npm install html-pdf-node cors

ہمارے پراجیکٹ فولڈرز میں موجود فائلوں کو روکنے اور اس بات کو یقینی بنانے کے لیے شاید ایک اچھا وقت ہے۔ اس مقام پر آپ کے پاس کلائنٹ پروجیکٹ فولڈر میں کیا ہونا چاہئے:

/audio-to-pdf-web-client
├─ /components
|  └── SpeechToText.jsx
├─ /pages
|  ├─ _app.js
|  └── index.js
└── /styles
    ├─globals.css
    └── Home.module.css

اور سرور پروجیکٹ فولڈر میں آپ کے پاس جو ہونا چاہئے وہ یہ ہے:

/audio-to-pdf-server
└── index.js

UI کی تعمیر

ٹھیک ہے، ہماری اسپیچ ٹو پی ڈی ایف اتنی اچھی نہیں ہوگی اگر اس کے ساتھ بات چیت کرنے کا کوئی طریقہ نہیں ہے، تو آئیے اس کے لیے ایک React جزو بناتے ہیں جسے ہم کال کر سکتے ہیں۔ <SpeechToText>.

آپ اپنے مارک اپ کو مکمل طور پر استعمال کر سکتے ہیں۔ یہ ہے جو میں آپ کو ان ٹکڑوں کا اندازہ دینے کے لیے رکھتا ہوں جو ہم اکٹھے کر رہے ہیں:

import React from "react";

const SpeechToText = () => {
  return (
    <>
      <section>
        <div className="button-container">
          <button type="button" style={{ "--bgColor": "blue" }}>
            Start
          </button>
          <button type="button" style={{ "--bgColor": "orange" }}>
            Stop
          </button>
        </div>
        <div
          className="words"
          contentEditable
          suppressContentEditableWarning={true}
        ></div>
        <div className="button-container">
          <button type="button" style={{ "--bgColor": "red" }}>
            Reset
          </button>
          <button type="button" style={{ "--bgColor": "green" }}>
            Convert to pdf
          </button>
        </div>
      </section>
    </>
  );
};

export default SpeechToText;

یہ جزو واپسی a رد عمل کا ٹکڑا جو ایک HTML پر مشتمل ہے۔ <``section``> عنصر جو تین divs پر مشتمل ہے:

.button-container دو بٹن پر مشتمل ہے جو اسپیچ ریکگنیشن کو شروع کرنے اور روکنے کے لیے استعمال ہوں گے۔
.words ہے contentEditable اور suppressContentEditableWarning اس عنصر کو قابل تدوین بنانے اور React کی طرف سے کسی بھی انتباہ کو دبانے کے لیے خصوصیات۔
ایک اور .button-container دو مزید بٹن رکھتا ہے جو کہ بولی کو ری سیٹ اور پی ڈی ایف میں تبدیل کرنے کے لیے استعمال کیا جائے گا۔

اسٹائلنگ ایک اور چیز ہے۔ میں یہاں اس میں نہیں جاؤں گا، لیکن آپ کا خیرمقدم ہے کہ میں نے کچھ اسلوب کو استعمال کریں جو میں نے آپ کے لیے ایک نقطہ آغاز کے طور پر لکھے ہیں styles/global.css فائل.

مکمل سی ایس ایس دیکھیں

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.home {
  background-color: #333;
  min-height: 100%;
  padding: 0 1rem;
  padding-bottom: 3rem;
}

h1 {
  width: 100%;
  max-width: 400px;
  margin: auto;
  padding: 2rem 0;
  text-align: center;
  text-transform: capitalize;
  color: white;
  font-size: 1rem;
}

.button-container {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 3rem;
}

button {
  color: white;
  background-color: var(--bgColor);
  font-size: 1.2rem;
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

button:hover {
  opacity: 0.9;
}

button:active {
  transform: scale(0.99);
}

.words {
  max-width: 700px;
  margin: 50px auto;
  height: 50vh;
  border-radius: 5px;
  padding: 1rem 2rem 1rem 5rem;
  background-image: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    from(#d9eaf3),
    color-stop(4%, #fff)
  ) 0 4px;
  background-size: 100% 3rem;
  background-attachment: scroll;
  position: relative;
  line-height: 3rem;
  overflow-y: auto;
}

.success,
.error {
  background-color: #fff;
  margin: 1rem auto;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  width: max-content;
  text-align: center;
  display: block;
}

.success {
  color: green;
}

.error {
  color: red;
}

وہاں موجود CSS متغیرات کو بٹنوں کے پس منظر کے رنگ کو کنٹرول کرنے کے لیے استعمال کیا جا رہا ہے۔

آئیے تازہ ترین تبدیلیاں دیکھیں! رن npm run dev ٹرمینل میں اور انہیں چیک کریں.

جب آپ وزٹ کرتے ہیں تو آپ کو اسے براؤزر میں دیکھنا چاہیے۔ http://localhost:3000:

نیکسٹ جے ایس اور ایکسپریس جے ایس کے ساتھ تقریر کو پی ڈی ایف میں تبدیل کرنا

متن کی تبدیلی کے لیے ہماری پہلی تقریر!

لینے کے لئے سب سے پہلے کارروائی ضروری انحصار کو درآمد کرنا ہے۔ <SpeechToText> جزو:

import React, { useRef, useState } from "react";
import SpeechRecognition, {
  useSpeechRecognition,
} from "react-speech-recognition";
import axios from "axios";

پھر ہم چیک کرتے ہیں کہ آیا اسپیچ ریکگنیشن براؤزر کے ذریعے تعاون یافتہ ہے اور اگر تعاون یافتہ نہ ہو تو نوٹس بھیجیں:

const speechRecognitionSupported =
  SpeechRecognition.browserSupportsSpeechRecognition();

if (!speechRecognitionSupported) {
  return <div>Your browser does not support speech recognition.</div>;
}

اگلا، آئیے نکالتے ہیں۔ transcript اور resetTranscript سے useSpeechRecognition() کانٹا:

const { transcript, resetTranscript } = useSpeechRecognition();

یہ وہی ہے جو ہمیں ریاست کو سنبھالنے کی ضرورت ہے۔ listening:

const [listening, setListening] = useState(false);

ہمیں بھی ایک کی ضرورت ہے۔ ref کے لئے div کے ساتھ contentEditable خصوصیت، پھر ہمیں شامل کرنے کی ضرورت ہے۔ ref اس سے منسوب کریں اور پاس کریں۔ transcript as children:

const textBodyRef = useRef(null);

…اور:

<div
  className="words"
  contentEditable
  ref={textBodyRef}
  suppressContentEditableWarning={true}
  >
  {transcript}
</div>

آخری چیز جس کی ہمیں یہاں ضرورت ہے وہ ایک فنکشن ہے جو اسپیچ ریکگنیشن کو متحرک کرتا ہے اور اس فنکشن کو اس سے جوڑتا ہے۔ onClick ہمارے بٹن کا واقعہ سننے والا۔ بٹن سننے کو سیٹ کرتا ہے۔ true اور اسے مسلسل چلاتا ہے۔ ہم بٹن کو اس حالت میں ہونے تک غیر فعال کر دیں گے تاکہ ہمیں اضافی ایونٹس کو بند کرنے سے روکا جا سکے۔

const startListening = () => {
  setListening(true);
  SpeechRecognition.startListening({
    continuous: true,
  });
};

…اور:

<button
  type="button"
  onClick={startListening}
  style={{ "--bgColor": "blue" }}
  disabled={listening}
>
  Start
</button>

بٹن پر کلک کرنے سے اب ٹرانسکرپشن شروع ہو جانا چاہیے۔

مزید کام

ٹھیک ہے، تو ہمارے پاس ایک جزو ہے جو کر سکتا ہے۔ شروع کریں سننا لیکن اب ہمیں کچھ دوسری چیزیں کرنے کی بھی ضرورت ہے، جیسے stopListening, resetText اور handleConversion. آئیے ان افعال کو بناتے ہیں۔

const stopListening = () => {
  setListening(false);
  SpeechRecognition.stopListening();
};

const resetText = () => {
  stopListening();
  resetTranscript();
  textBodyRef.current.innerText = "";
};

const handleConversion = async () => {}

فنکشنز میں سے ہر ایک کو ایک میں شامل کیا جائے گا۔ onClick مناسب بٹنوں پر واقعہ سننے والا:

<button
  type="button"
  onClick={stopListening}
  style={{ "--bgColor": "orange" }}
  disabled={listening === false}
>
  Stop
</button>

<div className="button-container">
  <button
    type="button"
    onClick={resetText}
    style={{ "--bgColor": "red" }}
  >
    Reset
  </button>
  <button
    type="button"
    style={{ "--bgColor": "green" }}
    onClick={handleConversion}
  >
    Convert to pdf
  </button>
</div>

۔ handleConversion فنکشن غیر مطابقت پذیر ہے کیونکہ ہم آخر کار API کی درخواست کریں گے۔ "اسٹاپ" بٹن میں غیر فعال خصوصیت ہے جو سننے کے غلط ہونے پر متحرک ہو جائے گی۔

اگر ہم سرور کو دوبارہ شروع کرتے ہیں اور براؤزر کو ریفریش کرتے ہیں، تو اب ہم براؤزر میں اپنی اسپیچ ٹرانسکرپشن کو شروع، روک اور دوبارہ ترتیب دے سکتے ہیں۔

اب ہمیں ایپ کی ضرورت ہے۔ نقل جس نے تقریر کو پی ڈی ایف فائل میں تبدیل کرکے پہچان لیا۔ اس کے لیے ہمیں Express.js سے سرور سائیڈ پاتھ کی ضرورت ہے۔

API کا راستہ ترتیب دینا

اس راستے کا مقصد ٹیکسٹ فائل لینا، اسے پی ڈی ایف میں تبدیل کرنا، اس پی ڈی ایف کو ہمارے فائل سسٹم میں لکھنا، پھر کلائنٹ کو جواب بھیجنا ہے۔

سیٹ اپ کرنے کے لیے، ہم کھولیں گے۔ server/index.js فائل کریں اور درآمد کریں۔ html-pdf-node اور fs انحصار جو ہمارے فائل سسٹم کو لکھنے اور کھولنے کے لیے استعمال ہوں گے۔

const HTMLToPDF = require("html-pdf-node");
const fs = require("fs");
const cors = require("cors)

اگلا، ہم اپنا راستہ ترتیب دیں گے:

app.use(cors())
app.use(express.json())

app.post("/", (req, res) => {
  // etc.
})

اس کے بعد ہم استعمال کرنے کے لیے درکار اپنے اختیارات کی وضاحت کرتے ہیں۔ html-pdf-node راستے کے اندر:

let options = { format: "A4" };
let file = {
  content: `<html><body><pre style='font-size: 1.2rem'>${req.body.text}</pre></body></html>`,
};

۔ options آبجیکٹ کاغذ کے سائز اور انداز کو سیٹ کرنے کے لیے ایک قدر قبول کرتا ہے۔ کاغذ کے سائز ان سائزنگ یونٹس سے بہت مختلف نظام کی پیروی کرتے ہیں جنہیں ہم عام طور پر ویب پر استعمال کرتے ہیں۔ مثال کے طور پر، A4 عام خط کا سائز ہے۔.

۔ file آبجیکٹ عوامی ویب سائٹ یا HTML مارک اپ کے URL کو قبول کرتا ہے۔ اپنے HTML صفحہ کو بنانے کے لیے، ہم استعمال کریں گے۔ html, body, pre HTML ٹیگز اور سے متن req.body.

آپ اپنی پسند کا کوئی بھی اسٹائل لگا سکتے ہیں۔

اگلا، ہم شامل کریں گے a trycatch کسی بھی غلطی کو سنبھالنے کے لئے جو راستے میں پاپ اپ ہوسکتی ہے:

try {

} catch(error){
  console.log(error);
  res.status(500).send(error);
}

اگلا، ہم استعمال کریں گے generatePdf سے html-pdf-node ایک پیدا کرنے کے لیے لائبریری pdfBuffer (کچی پی ڈی ایف فائل) ہماری فائل سے اور ایک منفرد بنائیں pdfName:

HTMLToPDF.generatePdf(file, options).then((pdfBuffer) => {
  // console.log("PDF Buffer:-", pdfBuffer);
  const pdfName = "./data/speech" + Date.now() + ".pdf";

  // Next code here
}

وہاں سے، ہم فائل سسٹم ماڈیول کو لکھنے، پڑھنے اور (ہاں، آخر میں!) کلائنٹ ایپ کو جواب بھیجنے کے لیے استعمال کرتے ہیں:

fs.writeFile(pdfName, pdfBuffer, function (writeError) {
  if (writeError) {
    return res
      .status(500)
      .json({ message: "Unable to write file. Try again." });
  }

  fs.readFile(pdfName, function (readError, readData) {
    if (!readError && readData) {
      // console.log({ readData });
      res.setHeader("Content-Type", "application/pdf");
      res.setHeader("Content-Disposition", "attachment");
      res.send(readData);
      return;
    }

    return res
      .status(500)
      .json({ message: "Unable to write file. Try again." });
  });
});

آئیے اسے تھوڑا سا توڑ دیتے ہیں:

۔ writeFile فائل سسٹم ماڈیول فائل کا نام، ڈیٹا اور کال بیک فنکشن کو قبول کرتا ہے جو فائل میں لکھنے میں کوئی مسئلہ ہونے کی صورت میں غلطی کا پیغام واپس کر سکتا ہے۔ اگر آپ کسی ایسے CDN کے ساتھ کام کر رہے ہیں جو غلطی کے اختتامی نکات فراہم کرتا ہے، تو آپ اس کے بجائے ان کا استعمال کر سکتے ہیں۔
۔ readFile فائل سسٹم ماڈیول ایک فائل کا نام اور کال بیک فنکشن کو قبول کرتا ہے جو پڑھنے کی غلطی کے ساتھ ساتھ پڑھنے والے ڈیٹا کو واپس کرنے کے قابل ہے۔ ایک بار جب ہمارے پاس پڑھنے میں کوئی غلطی نہیں ہوتی ہے اور پڑھا ہوا ڈیٹا موجود ہوتا ہے، تو ہم کلائنٹ کو جواب دیں گے اور بھیجیں گے۔ ایک بار پھر، اگر آپ کے پاس ہیں تو اسے آپ کے CDN کے اختتامی پوائنٹس سے تبدیل کیا جا سکتا ہے۔
۔ res.setHeader("Content-Type", "application/pdf"); براؤزر کو بتاتا ہے کہ ہم پی ڈی ایف فائل بھیج رہے ہیں۔
۔ res.setHeader("Content-Disposition", "attachment"); براؤزر سے کہتا ہے کہ موصول شدہ ڈیٹا کو ڈاؤن لوڈ کے قابل بنائے۔

چونکہ API روٹ تیار ہے، ہم اسے اپنی ایپ میں استعمال کر سکتے ہیں۔ http://localhost:4000. ہم اپنی درخواست کے کلائنٹ کے حصے کو مکمل کرنے کے لیے آگے بڑھ سکتے ہیں۔ handleConversion تقریب.

تبدیلی کو سنبھالنا

اس سے پہلے کہ ہم ایک پر کام شروع کر سکیں handleConversion فنکشن، ہمیں ایک ایسی حالت بنانے کی ضرورت ہے جو لوڈنگ، غلطی، کامیابی اور دیگر پیغامات کے لیے ہماری API کی درخواستوں کو ہینڈل کرے۔ ہم React کا استعمال کرنے جا رہے ہیں۔ useState اسے ترتیب دینے کے لیے ہک:

const [response, setResponse] = useState({
  loading: false,
  message: "",
  error: false,
  success: false,
});

میں handleConversion فنکشن، ہم اپنے کوڈ کو چلانے سے پہلے چیک کریں گے کہ ویب صفحہ کب لوڈ ہوا ہے اور یقینی بنائیں گے۔ div کے ساتھ editable وصف خالی نہیں ہے:

if (typeof window !== "undefined") {
const userText = textBodyRef.current.innerText;
  // console.log(textBodyRef.current.innerText);

  if (!userText) {
    alert("Please speak or write some text.");
    return;
  }
}

ہم اپنی حتمی API درخواست کو a میں لپیٹ کر آگے بڑھتے ہیں۔ trycatch، پیدا ہونے والی کسی بھی خرابی کو سنبھالنا، اور ردعمل کی حالت کو اپ ڈیٹ کرنا:

try {

} catch(error){
  setResponse({
    ...response,
    loading: false,
    error: true,
    message:
      "An unexpected error occurred. Text not converted. Please try again",
    success: false,
  });
}

اس کے بعد، ہم نے جوابی حالت کے لیے کچھ قدریں مقرر کیں اور اس کے لیے config بھی ترتیب دیں۔ axios اور سرور سے پوسٹ کی درخواست کریں:

setResponse({
  ...response,
  loading: true,
  message: "",
  error: false,
  success: false,
});
const config = {
  headers: {
    "Content-Type": "application/json",
  },
  responseType: "blob",
};

const res = await axios.post(
  "http://localhost:4000",
  {
    text: textBodyRef.current.innerText,
  },
  config
);

ایک بار جب ہمیں کامیاب جواب مل جاتا ہے، تو ہم مناسب اقدار کے ساتھ رسپانس سٹیٹ سیٹ کرتے ہیں اور براؤزر کو موصول شدہ پی ڈی ایف ڈاؤن لوڈ کرنے کی ہدایت کرتے ہیں:

setResponse({
  ...response,
  loading: false,
  error: false,
  message:
    "Conversion was successful. Your download will start soon...",
  success: true,
});

// convert the received data to a file
const url = window.URL.createObjectURL(new Blob([res.data]));
// create an anchor element
const link = document.createElement("a");
// set the href of the created anchor element
link.href = url;
// add the download attribute, give the downloaded file a name
link.setAttribute("download", "yourfile.pdf");
// add the created anchor tag to the DOM
document.body.appendChild(link);
// force a click on the link to start a simulated download
link.click();

اور ہم مندرجہ ذیل مواد کو ایڈٹ ایبل کے نیچے استعمال کر سکتے ہیں۔ div پیغامات کی نمائش کے لیے:

<div>
  {response.success && <i className="success">{response.message}</i>}
  {response.error && <i className="error">{response.message}</i>}
</div>

حتمی کوڈ

میں نے GitHub پر سب کچھ پیک کر لیا ہے تاکہ آپ سرور اور کلائنٹ دونوں کے لیے مکمل سورس کوڈ چیک کر سکیں۔

ٹائم اسٹیمپ: اگست 4، 2022اگست 4، 2022

نیکسٹ جے ایس اور ایکسپریس جے ایس کے ساتھ تقریر کو پی ڈی ایف میں تبدیل کرنا

افلاطون کے ذریعہ دوبارہ شائع کیا گیا۔

یہ وہ ٹولز ہیں جو ہم استعمال کر رہے ہیں۔

قائم کرنے

آئیے دیگر انحصار کو انسٹال کرتے ہیں۔

UI کی تعمیر

متن کی تبدیلی کے لیے ہماری پہلی تقریر!

مزید کام

API کا راستہ ترتیب دینا

تبدیلی کو سنبھالنا

حتمی کوڈ

سے زیادہ سی ایس ایس ٹیکنیکس

اگلے (یا کسی بھی SSR فریم ورک) کے ساتھ ویب اجزاء کا استعمال

سی ایس ایس سینز کے پیچھے، نومبر 2022

سی ایس ایس سینز کے پیچھے، ستمبر 2022

میں نے سی ایس ایس کسٹم پراپرٹیز سے آئکن سسٹم کیسے بنایا

ٹیل ونڈ پروجیکٹ میں حسب ضرورت اسٹائلز کا نظم کرنے کے لیے CSS کیسکیڈ پرتوں کا استعمال

`تفصیلات` پر مزید تفصیلات

سی ایس ایس ٹھیک ہے، میرا اندازہ ہے۔

فرنٹ اینڈ ویب ڈویلپرز کے لیے پھڑپھڑانا

مضمر گرڈز، دہرائے جانے والے لے آؤٹ پیٹرنز، اور ڈینگلر

میری بے وقوف CSS غلطیاں

متحرک پوسٹ فیچر امیجز کے ساتھ ورڈپریس بلاک تھیم کور ٹیمپلیٹس کو کس طرح اپنی مرضی کے مطابق بنائیں

ہمارے متعلق

عمودی تلاش اور Ai

پلیٹ فارم

مربوط رہو

اکاؤنٹ