پی ڈی ایف دستاویزات اکثر انوائسز، معاہدوں، رپورٹس، قانونی ریکارڈز، کسٹمر دستاویزات، مالیاتی بیانات، اور اندرونی کاروباری فائلوں کا اشتراک کرنے کے لیے استعمال ہوتے ہیں۔ تاہم، ان دستاویزات میں ایسی معلومات شامل ہو سکتی ہیں جو شیئر کیے جانے سے پہلے وصول کنندگان کو نظر نہیں آنی چاہیے۔
انوائس میں اکاؤنٹ نمبر شامل ہو سکتا ہے۔ کسٹمر کی دستاویزات میں گھر کا پتہ یا فون نمبر شامل ہو سکتا ہے۔ قانونی فائلیں کسی کیس کے بارے میں خفیہ معلومات کو ظاہر کر سکتی ہیں، جبکہ اندرونی رپورٹوں میں نام، حوالہ جات، یا کاروباری ڈیٹا شامل ہو سکتا ہے جو صرف ملازمین کے لیے ہے۔
یہیں سے پی ڈی ایف ایڈیٹنگ مفید ہو جاتی ہے۔
ریڈیکشن صارفین کو دستاویز کے حساس علاقوں کو منتخب کرنے اور نئی پی ڈی ایف بنانے سے پہلے ان علاقوں کو مستقل طور پر کور کرنے کی اجازت دیتا ہے۔ ایک عملی پروف ریڈنگ ٹول کو متعدد پروفنگ ایریاز، پیج سلیکشن، دستاویز کا پیش نظارہ، اور حتمی آؤٹ پٹ چیک کرنے میں بھی مدد کرنی چاہیے۔
اس ٹیوٹوریل میں، ہم براؤزر پر مبنی پی ڈی ایف ایڈیٹنگ ٹول بنانے کے لیے جاوا اسکرپٹ کا استعمال کرتے ہیں۔ صارفین پی ڈی ایف اپ لوڈ کرتے ہیں، اس کے صفحات پر تشریف لے جاتے ہیں، براہ راست دستاویز کے پیش نظارہ پر ریڈیکشن بکس کھینچتے ہیں، متعدد ریڈیکشنز کا نظم کرتے ہیں اور انہیں منتخب صفحات پر لاگو کرتے ہیں، پروسیس شدہ دستاویز کا پیش نظارہ کرتے ہیں، حتمی فائل کا نام تبدیل کرتے ہیں، اور ترمیم شدہ پی ڈی ایف کو ڈاؤن لوڈ کرتے ہیں۔
پورا ورک فلو براؤزر کے اندر چلتا ہے۔ یہ خاص طور پر پرائیویسی فوکسڈ دستاویز ٹولز کے لیے مفید ہے کیونکہ پی ڈی ایف پروسیسنگ بیک اینڈ سرور کے بغیر مقامی طور پر ہو سکتی ہے۔
اس ٹیوٹوریل کے اختتام تک، آپ نہ صرف یہ سمجھ جائیں گے کہ ریڈیکشن ایریا کیسے ڈرایا جائے، بلکہ براؤزر کوآرڈینیٹ کو پی ڈی ایف کوآرڈینیٹ میں کیسے تبدیل کیا جائے اور ان انتخابوں کو حقیقی دستاویز پر لاگو کیا جائے۔
انڈیکس
ترمیم کرنا بلیک باکس ڈرائنگ سے مختلف ہے۔
ایک عام غلطی یہ سمجھنا ہے کہ متن پر سیاہ مستطیل رکھنے سے معلومات خود بخود محفوظ ہوجاتی ہیں۔
بصری طور پر، ایسا لگتا ہے کہ دستاویز میں ترمیم کی گئی ہے۔ تاہم، اس بات پر منحصر ہے کہ پی ڈی ایف میں ترمیم کیسے کی گئی، اصل متن یا تصویری مواد اب بھی مستطیل کے نیچے موجود ہو سکتا ہے۔
مثال کے طور پر، اکاؤنٹ نمبر کے اوپر ایک بلیک باکس کو ایک نئی تشریحی پرت کے طور پر شامل کرنے کا تصور کریں۔ وہ نمبر اب صفحہ پر ظاہر نہیں ہوگا، لیکن پی ڈی ایف کا بنیادی مواد اب بھی موجود ہو سکتا ہے۔
کچھ ناقص ترمیم شدہ دستاویزات میں، صارفین چھپے ہوئے مواد کو منتخب، کاپی، بازیافت یا بازیافت کرسکتے ہیں۔
یہی وجہ ہے کہ تدوین کو محض بصری سجاوٹ سے مختلف انداز میں برتا جانا چاہیے۔
براؤزر پر مبنی ورک فلو میں، منتخب کردہ ایریاز پروسیس شدہ پی ڈی ایف تیار کرتے وقت لاگو ہوتے ہیں۔ اس کے بعد آپ کو حتمی دستاویز کا اشتراک کرنے سے پہلے اس کا بغور جائزہ لینا چاہیے۔
یہ نہ سمجھیں کہ صرف سیاہ مستطیل بنیادی پی ڈی ایف مواد کو محفوظ طریقے سے ہٹانے کی ضمانت دیتا ہے۔ انتہائی محفوظ یا قانونی طور پر حساس دستاویزات کے لیے، حتمی فائلوں کی توثیق ایک وقف ادارتی تصدیقی عمل کے ذریعے کی جانی چاہیے۔
براؤزر پر مبنی پی ڈی ایف پروفنگ کیسے کام کرتی ہے۔
پروف ریڈنگ ورک فلو کو کئی واضح مراحل میں تقسیم کیا جا سکتا ہے:
سب سے پہلے، براؤزر اپ لوڈ کردہ پی ڈی ایف کو پڑھتا ہے اور صفحہ کا پیش نظارہ پیش کرتا ہے۔ پیش نظارہ صارفین کو اہم معلومات کی شناخت کے لیے بصری سطح فراہم کرتے ہیں۔
اگلا، صارف ایک درست مستطیل بنانے کے لیے پیش نظارہ پر کلک کرتا اور گھسیٹتا ہے۔
ہر مستطیل کوآرڈینیٹ کے سیٹ کے طور پر محفوظ کیا جاتا ہے۔
const redaction = {
page: 7,
x: 420,
y: 35,
width: 310,
height: 220
};
ایک ایپلیکیشن ایک ہی صفحہ کے لیے متعدد مستطیل ذخیرہ کر سکتی ہے۔
redactions.push(redaction);
جب صارف کلک کرتا ہے۔ درخواست اور تکمیلایپلیکیشن اس بات کا تعین کرتی ہے کہ کن صفحات کو منتخب کردہ تدارک حاصل کرنا چاہیے۔
انشانکن کوآرڈینیٹس پھر پیش نظارہ نقاط سے اصل پی ڈی ایف صفحہ نقاط میں تبدیل ہو جاتے ہیں۔ آخر میں، ایپلیکیشن ایک نئی دستاویز بناتی ہے جہاں آپ پی ڈی ایف میں ترمیم کر سکتے ہیں، اس کا پیش منظر دیکھ سکتے ہیں اور اسے ڈاؤن لوڈ کر سکتے ہیں۔
مکمل ورک فلو مندرجہ ذیل ہے:
Upload PDF
↓
Render Page Preview
↓
Draw Redaction Areas
↓
Store Coordinates
↓
Select Target Pages
↓
Apply Redactions
↓
Generate New PDF
↓
Preview and Download
پی ڈی ایف پروسیسنگ منطق سے انٹرفیس کو الگ کرنے سے آپ کی ایپلیکیشن کا انتظام اور ڈیبگ کرنا آسان ہوجاتا ہے۔
پی ڈی ایف اور کینوس کوآرڈینیٹس کو سمجھنا
اس منصوبے کے سب سے اہم تکنیکی حصوں میں سے ایک کوآرڈینیٹ ٹرانسفارمیشن ہے۔
براؤزر کے اندر دکھائے جانے والے پی ڈی ایف صفحات عام طور پر دستیاب اسکرین کی جگہ کے مطابق ہوتے ہیں۔ پی ڈی ایف صفحہ کی اصل چوڑائی 842 پوائنٹس ہو سکتی ہے، لیکن براؤزر کا پیش نظارہ صرف 600 پکسلز چوڑا ہے۔
اس کا مطلب ہے کہ ایک مستطیل تیار کیا گیا ہے۔ x = 300 آپ اسے صرف پیش نظارہ میں نہیں رکھ سکتے۔ x = 300 پی ڈی ایف میں۔
سب سے پہلے، آئیے پیمانے کے فرق کا حساب لگائیں۔
const scaleX =
pdfPageWidth / canvasWidth;
const scaleY =
pdfPageHeight / canvasHeight;
پھر آپ منتخب مستطیل کو تبدیل کر سکتے ہیں۔
const pdfX =
redaction.x * scaleX;
const pdfWidth =
redaction.width * scaleX;
const pdfHeight =
redaction.height * scaleY;
براؤزر کینوس اور پی ڈی ایف صفحات عام طور پر مختلف کوآرڈینیٹ اصل استعمال کرتے ہیں، اس لیے Y کوآرڈینیٹ پر خصوصی توجہ کی ضرورت ہے۔
کینوس کوآرڈینیٹ عام طور پر اوپر بائیں طرف سے شروع ہوتے ہیں۔ پی ڈی ایف کوآرڈینیٹ عام طور پر نیچے بائیں سے کام کرتے ہیں۔
لہذا، Y پوزیشن کو تبدیل کیا جا سکتا ہے:
const pdfY =
pdfPageHeight -
((redaction.y + redaction.height) * scaleY);
یہ چھوٹا سا حساب ضروری ہے۔
درست کوآرڈینیٹ ٹرانسفارمیشن کے بغیر، فون نمبر پر تیار کردہ ایڈیٹ باکس تیار کردہ پی ڈی ایف میں اس نمبر سے کئی سینٹی میٹر دور ظاہر ہو سکتا ہے۔
درست کوآرڈینیٹ میپنگ اس بات کو یقینی بناتی ہے کہ براؤزر میں پروف ریڈر جو ڈرا کرتا ہے وہ حتمی دستاویز کے اسی علاقے سے ملتا ہے۔
پروجیکٹ کی ترتیبات
چونکہ ایڈیٹنگ ورک فلو مکمل طور پر براؤزر میں چلتا ہے، اس لیے ہم پروجیکٹ کی ساخت کو سادہ رکھیں گے۔
تین فائلوں پر مشتمل ایک نیا پروجیکٹ فولڈر بنائیں۔
pdf-redaction-tool/
│
├── index.html
├── style.css
└── script.js
کہ index.html فائل میں اپ لوڈ انٹرفیس، پی ڈی ایف پیش نظارہ، نظرثانی کنٹرول، اور حتمی ڈاؤن لوڈ کے حصے شامل ہیں۔
کہ style.css فائل صفحہ کی ترتیب اور اوورلے اسٹائل میں ترمیم کرتی ہے۔
کہ script.js فائل میں پی ڈی ایف لوڈنگ، رینڈرنگ، کوآرڈینیٹ ٹریکنگ، ریویژن مینجمنٹ اور فائنل پی ڈی ایف جنریشن کے لیے منطق شامل ہے۔
ایک بنیادی HTML ڈھانچہ کے ساتھ شروع کریں۔
PDF Redaction Tool
PDF.js ورکر کو کنفیگر کریں۔
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
یہ فعال دستاویز اور پروفنگ ڈیٹا کو ذخیرہ کرنے کے لیے کئی متغیرات بھی بناتا ہے۔
let pdfDocument = null;
let pdfBytes = null;
let currentPage = 1;
let redactions = {};
اپنی تمام ترامیم کو ایک فلیٹ صف میں ذخیرہ کرنے کے بجائے، آپ انہیں صفحہ نمبر کے مطابق ترتیب دے سکتے ہیں۔
redactions = {
1: [],
2: [],
7: []
};
یہ ڈھانچہ صفحہ نیویگیشن اور صفحہ کی مخصوص ترمیم کے انتظام کو بہت آسان بنا دیتا ہے۔
پی ڈی ایف اپ لوڈ انٹرفیس بنائیں
پہلی اسکرین جو صارف دیکھتا ہے وہ پی ڈی ایف اپ لوڈ ایریا ہے۔
صارفین یا تو دستاویزات کو اپ لوڈ باکس میں گھسیٹ سکتے ہیں یا پی ڈی ایف منتخب کریں۔ بٹن دبانے سے آپ کے براؤزر کا فائل چننے والا کھل جاتا ہے۔
اپ لوڈ انٹرفیس بنائیں۔
Upload your PDF to permanently black out
sensitive information.
بٹن کو پوشیدہ فائل ان پٹ سے مربوط کریں۔
const pdfInput =
document.getElementById("pdfInput");
const selectPdfButton =
document.getElementById("selectPdfButton");
selectPdfButton.addEventListener("click", () => {
pdfInput.click();
});
اگلا، فائل کا انتخاب سنیں۔
pdfInput.addEventListener("change", async event => {
const file = event.target.files[0];
if (!file) {
return;
}
await loadPdfFile(file);
});
دستاویز لوڈ کرنے سے پہلے منتخب فائل کو چیک کریں۔
async function loadPdfFile(file) {
if (file.type !== "application/pdf") {
alert("Please select a valid PDF file.");
return;
}
pdfBytes =
await file.arrayBuffer();
}
ڈریگ اینڈ ڈراپ اپ لوڈنگ کو بھی سپورٹ کیا جا سکتا ہے۔
dropZone.addEventListener("dragover", event => {
event.preventDefault();
dropZone.classList.add("dragging");
});
dropZone.addEventListener("dragleave", () => {
dropZone.classList.remove("dragging");
});
dropZone.addEventListener("drop", async event => {
event.preventDefault();
dropZone.classList.remove("dragging");
const file =
event.dataTransfer.files[0];
if (file) {
await loadPdfFile(file);
}
});
فائل کو پڑھنے کے بعد اسے PDF.js میں لوڈ کریں۔
pdfDocument =
await pdfjsLib
.getDocument({
data: pdfBytes.slice(0)
})
.promise;
currentPage = 1;
await renderPage(currentPage);
اب آپ اپنے دستاویز کا پیش نظارہ اور ترمیم کرنے کے لیے تیار ہیں۔
اپ لوڈ کردہ پی ڈی ایف صفحات کا پیش نظارہ کریں۔
پی ڈی ایف لوڈ ہونے پر، ایپلیکیشن کینوس کے اندر موجودہ صفحہ دکھاتی ہے۔
کینوس دو مقاصد کو پورا کرتا ہے۔ سب سے پہلے، یہ صارفین کو دستاویز کا درست پیش نظارہ فراہم کرتا ہے۔ دوسرا، یہ بصری سطح بن جاتی ہے جس پر ترمیم کا مستطیل کھینچا جاتا ہے۔
ایڈیٹر کا پیش نظارہ بنائیں۔
کہ pdfCanvas پی ڈی ایف صفحات دکھاتا ہے۔
کہ redactionLayer یہ کینوس کے اوپر بیٹھتا ہے اور اس میں ایک سلیکشن باکس ہوتا ہے جسے آپ بناتے ہیں۔
PDF.js کا استعمال کرتے ہوئے فعال صفحہ رینڈر کریں۔
async function renderPage(pageNumber) {
const page =
await pdfDocument.getPage(pageNumber);
const viewport =
page.getViewport({
scale: 1.4
});
const canvas =
document.getElementById("pdfCanvas");
const context =
canvas.getContext("2d");
canvas.width =
viewport.width;
canvas.height =
viewport.height;
await page.render({
canvasContext: context,
viewport: viewport
}).promise;
updatePageInformation();
renderSavedRedactions();
}
صفحہ نیویگیشن کی معلومات کو اپ ڈیٹ کریں۔
function updatePageInformation() {
document
.getElementById("pageInfo")
.textContent =
`Page ${currentPage} of ${pdfDocument.numPages}`;
}
صارفین پچھلے صفحہ پر جاسکتے ہیں۔
previousPage.addEventListener("click", async () => {
if (currentPage <= 1) {
return;
}
currentPage--;
await renderPage(currentPage);
});
اگلا صفحہ بٹن اسی طرح کام کرتا ہے۔
nextPage.addEventListener("click", async () => {
if (
currentPage >= pdfDocument.numPages
) {
return;
}
currentPage++;
await renderPage(currentPage);
});
جب بھی صارف صفحات تبدیل کرتا ہے، کینوس منتخب پی ڈی ایف صفحہ کو رینڈر کرتا ہے اور اس صفحہ کے لیے پہلے سے محفوظ کیے گئے کسی بھی ریڈیکشن باکس کو بحال کرتا ہے۔
یہ ضروری ہے کیونکہ پروف ریڈنگ صفحہ بہ صفحہ کی جاتی ہے۔ صفحہ 7 پر بنائے گئے مستطیل صفحہ 8 پر خود بخود ظاہر نہیں ہونے چاہئیں جب تک کہ صارف بعد میں اس انتخاب کو متعدد صفحات پر لاگو کرنے کا انتخاب نہ کرے۔
پی ڈی ایف اب لوڈ اور پیش کی گئی ہے اور صارف کی بات چیت کے لیے تیار ہے۔
پی ڈی ایف پر ریڈیکشن ایریاز بنائیں
اب جبکہ پی ڈی ایف صفحہ نظر آ رہا ہے، صارف کو ان معلومات کو ظاہر کرنے کے لیے ایک آسان طریقہ کی ضرورت ہے جسے وہ چھپانا چاہتے ہیں۔
اس پروجیکٹ میں، صارف صفحہ کے پیش نظارہ پر براہ راست کلک اور گھسیٹ کر ایک ترمیمی مستطیل بنا سکتے ہیں۔ تعامل تصویری ایڈیٹر میں کسی علاقے کو منتخب کرنے کے مترادف ہے۔
سب سے پہلے، آئیے پوائنٹر کی ابتدائی پوزیشن کو ٹریک کریں۔
let isDrawing = false;
let startX = 0;
let startY = 0;
let activeBox = null;
اصلاحی پرت سے پوائنٹر ڈاؤن ایونٹس وصول کریں۔
redactionLayer.addEventListener(
"pointerdown",
event => {
isDrawing = true;
const bounds =
redactionLayer.getBoundingClientRect();
startX =
event.clientX - bounds.left;
startY =
event.clientY - bounds.top;
activeBox =
document.createElement("div");
activeBox.className =
"redaction-box";
activeBox.style.left =
`${startX}px`;
activeBox.style.top =
`${startY}px`;
redactionLayer.appendChild(activeBox);
}
);
پوائنٹر کی حرکت کے ساتھ ہی مستطیل طول و عرض کو اپ ڈیٹ کرتا ہے۔
redactionLayer.addEventListener(
"pointermove",
event => {
if (!isDrawing) {
return;
}
const bounds =
redactionLayer.getBoundingClientRect();
const currentX =
event.clientX - bounds.left;
const currentY =
event.clientY - bounds.top;
const width =
Math.abs(currentX - startX);
const height =
Math.abs(currentY - startY);
activeBox.style.width =
`${width}px`;
activeBox.style.height =
`${height}px`;
activeBox.style.left =
`${Math.min(startX, currentX)}px`;
activeBox.style.top =
`${Math.min(startY, currentY)}px`;
}
);
کہ Math.min() کال اہم ہے کیونکہ یہ صارف کو کسی بھی سمت میں گھسیٹنے کی اجازت دیتا ہے۔ آپ اوپر بائیں سے شروع کر سکتے ہیں اور نیچے جا سکتے ہیں، یا نیچے دائیں سے شروع کر کے اوپر گھسیٹ سکتے ہیں۔
جب آپ پوائنٹر جاری کرتے ہیں، تو یہ مکمل مستطیل کو بچاتا ہے۔
redactionLayer.addEventListener(
"pointerup",
() => {
if (!isDrawing) {
return;
}
isDrawing = false;
saveRedaction(activeBox);
activeBox = null;
}
);
ترمیم کرتے وقت ترمیم کے علاقے کو نیم شفاف سیاہ مستطیل کے طور پر اسٹائل کیا جاسکتا ہے۔
.redaction-box {
position: absolute;
background: rgba(0, 0, 0, 0.8);
border: 1px dashed #ffffff;
cursor: move;
}
شفاف پیش نظارہ صارفین کو یہ دیکھنے کی اجازت دیتے ہیں کہ ارد گرد کے صفحات سے آگاہ رہتے ہوئے فی الحال کون سا مواد احاطہ کرتا ہے۔
انشانکن اسٹوریج اور انتظام
بصری طور پر مستطیل ڈرائنگ صرف پہلا قدم ہے۔ مزید برآں، درخواست کو مقام اور سائز کو یاد رکھنا چاہیے۔
ایک بار کیلیبریشن باکس مکمل ہونے کے بعد، موجودہ نقاط کو پڑھیں۔
function saveRedaction(box) {
const redaction = {
x: parseFloat(box.style.left),
y: parseFloat(box.style.top),
width: box.offsetWidth,
height: box.offsetHeight
};
if (!redactions[currentPage]) {
redactions[currentPage] = [];
}
redactions[currentPage].push(redaction);
renderSavedRedactions();
updateRedactionList();
}
ثبوت فی صفحہ محفوظ کیے جاتے ہیں، تاکہ صارف اپنے انتخاب کو کھونے کے بغیر دستاویز پر تشریف لے جائیں۔
مثال کے طور پر:
redactions = {
7: [
{
x: 420,
y: 35,
width: 310,
height: 220
},
{
x: 160,
y: 320,
width: 150,
height: 140
}
]
};
صفحہ 7 اب دو ترمیمی علاقوں پر مشتمل ہے۔
انٹرفیس اس طرح دکھا سکتا ہے: ترمیم نمبر 1 اور ترمیم نمبر 2.
function updateRedactionList() {
const list =
document.getElementById(
"redactionList"
);
list.innerHTML = "";
const pageRedactions =
redactions[currentPage] || [];
pageRedactions.forEach(
(redaction, index) => {
const item =
document.createElement("div");
item.textContent =
`Redaction #${index + 1}`;
list.appendChild(item);
}
);
}
یہ فہرست صارف کو موجودہ صفحہ پر منتخب علاقے کا واضح جائزہ فراہم کرتی ہے۔
ایک اصلاح کو ہٹا دیں۔
صارف غلطی سے دستاویز کے غلط حصوں کو چھپا سکتے ہیں۔ آپ کے تمام انتخاب کو صاف کرنے اور دوبارہ شروع کرنے کی ضرورت نہیں ہے۔
ہر ترمیم آئٹم میں ایک ہٹائیں بٹن شامل کریں۔
const removeButton =
document.createElement("button");
removeButton.textContent = "×";
removeButton.addEventListener(
"click",
() => {
removeRedaction(index);
}
);
item.appendChild(removeButton);
صرف منتخب مستطیل کو ہٹاتا ہے۔
function removeRedaction(index) {
redactions[currentPage]
.splice(index, 1);
renderSavedRedactions();
updateRedactionList();
}
آپ کی باقی ترامیم میں کوئی تبدیلی نہیں ہوئی ہے۔
موجودہ صفحہ سے تمام اصلاحات کو صاف کریں۔
کہ اس صفحہ سے سب کو صاف کریں۔ بٹن پر کلک کرنے سے فعال صفحہ سے تمام انتخاب ختم ہو جائیں گے۔
clearPageButton.addEventListener(
"click",
() => {
redactions[currentPage] = [];
renderSavedRedactions();
updateRedactionList();
}
);
دوسرے صفحات پر کی گئی ترامیم کو ہٹایا نہیں جاتا ہے۔
اگر آپ صفحہ 7 کو صاف کرتے ہیں، تو آپ اب بھی صفحہ 2 یا 5 پر محفوظ کردہ انتخاب استعمال کر سکتے ہیں۔
منتخب صفحات پر ترمیم کا اطلاق کریں۔
پروف ریڈنگ ٹولز کو ایک صفحے سے زیادہ ہینڈل کرنے کی ضرورت ہے۔
بعض اوقات حساس معلومات صرف ایک بار ظاہر ہوتی ہیں۔ دیگر دستاویزات میں، ایک ہی معلومات کو متعدد صفحات پر دہرایا جا سکتا ہے۔
مثال کے طور پر، ہر صفحہ کے ہیڈر میں ایک خفیہ حوالہ نمبر ظاہر ہو سکتا ہے۔ ایک ہی مستطیل کو 50 بار دستی طور پر کھینچنا غیر موثر ہے۔
ہمارا انٹرفیس صفحہ کے انتخاب کے تین طریقے فراہم کرتا ہے:
-
صرف موجودہ صفحہ فعال صفحہ پر ترامیم کا اطلاق کرتا ہے۔
-
تمام صفحات پوری دستاویز میں موجودہ صفحہ کے ترمیمی مقام کو کاپی کرتا ہے۔
-
مخصوص صفحہ آپ کا انتخاب صرف آپ کے درج کردہ صفحہ نمبر یا حد پر لاگو ہوتا ہے۔
صفحہ انتخاب کنٹرول بنائیں۔
3. Apply to Pages
منتخب موڈ کو پڑھتا ہے۔
const applyMode =
document.querySelector(
'input[name="applyMode"]:checked'
).value;
موجودہ صفحہ کے لیے صرف ایک صفحہ نمبر درکار ہے۔
if (applyMode === "current") {
targetPages = [currentPage];
}
تمام صفحات کے لیے ایک مکمل صفحہ فہرست تیار کرتا ہے۔
if (applyMode === "all") {
targetPages =
Array.from(
{
length:
pdfDocument.numPages
},
(_, index) => index + 1
);
}
کچھ صفحہ کی حدود میں ایک چھوٹے تجزیہ کار کی ضرورت ہوتی ہے۔
function parsePageRange(value) {
const pages = new Set();
value.split(",").forEach(part => {
const range =
part.trim().split("-");
if (range.length === 2) {
const start =
Number(range[0]);
const end =
Number(range[1]);
for (
let page = start;
page <= end;
page++
) {
pages.add(page);
}
} else {
pages.add(Number(range[0]));
}
});
return [...pages];
}
قدر:
1, 3-5, 10
یہ اس طرح جاتا ہے:
[1, 3, 4, 5, 10]
براہ کرم کارروائی سے پہلے غلط صفحہ نمبروں کو ہٹا دیں۔
targetPages =
targetPages.filter(page =>
page >= 1 &&
page <= pdfDocument.numPages
);
صفحہ کے انتخاب کی یہ خصوصیت خاص طور پر اس وقت کارآمد ہوتی ہے جب دہرائے جانے والے ہیڈر، فوٹر، دستاویز کے ID، یا دیگر معلومات کو ایک سے زیادہ صفحات پر مستقل طور پر رکھا جاتا ہے۔
لاگو کریں اور اصلاحات کو ختم کریں۔
صارفین ایک ایڈیٹنگ ایریا بنا سکتے ہیں، ایک ٹارگٹ پیج منتخب کر سکتے ہیں، اور اگلا پر کلک کر سکتے ہیں۔ درخواست اور تکمیل.
ایکشن کنٹرول بنائیں۔
فنش بٹن کو پروسیسنگ فنکشن سے جوڑیں۔
applyButton.addEventListener(
"click",
async () => {
const pageRedactions =
redactions[currentPage] || [];
if (pageRedactions.length === 0) {
alert(
"Please add at least one redaction."
);
return;
}
await generateRedactedPdf();
}
);
کہ دوبارہ شروع کریں بٹن کو دبانے سے موجودہ دستاویز صاف ہو جاتی ہے اور صارف کو اپ لوڈ انٹرفیس پر واپس آ جاتا ہے۔
startOverButton.addEventListener(
"click",
() => {
pdfDocument = null;
pdfBytes = null;
currentPage = 1;
redactions = {};
pdfInput.value = "";
location.reload();
}
);
پروڈکشن ایپلی کیشنز میں، آپ پورے صفحے کو دوبارہ لوڈ کرنے کے بجائے انفرادی انٹرفیس سیکشن کو دوبارہ ترتیب دے سکتے ہیں۔
اس مرحلے میں، صارف ایک سے زیادہ ریڈیکشن باکسز کھینچ سکتا ہے، انفرادی انتخاب کو ہٹا سکتا ہے، فعال صفحہ سے تمام ریڈیکشنز کو صاف کر سکتا ہے، اور بالکل منتخب کر سکتا ہے کہ کون سے صفحات کو ریڈیکشن کے منتخب حصے موصول ہوں گے۔
ترمیم شدہ پی ڈی ایف بنائیں
پروف باکس فی الحال صرف براؤزر کے پیش نظارہ میں موجود ہے۔ حتمی دستاویز بنانے کے لیے آپ کو ان پوزیشنز کو اصل پی ڈی ایف صفحات پر لاگو کرنا ہوگا۔
PDF-lib کا استعمال کرتے ہوئے اصل پی ڈی ایف لوڈ کریں۔
async function generateRedactedPdf() {
const pdfDoc =
await PDFLib.PDFDocument.load(
pdfBytes.slice(0)
);
const pages =
pdfDoc.getPages();
const sourceRedactions =
redactions[currentPage] || [];
const targetPages =
getTargetPages();
}
اگلا، منتخب صفحات کے ذریعے اعادہ کریں۔
targetPages.forEach(pageNumber => {
const page =
pages[pageNumber - 1];
applyPageRedactions(
page,
sourceRedactions
);
});
چونکہ براؤزر کا پیش نظارہ اور پی ڈی ایف صفحہ مختلف سائز کا ہو سکتا ہے، اس لیے آپ کو ہر مستطیل کو لاگو کرنے سے پہلے اس کا سائز تبدیل کرنا ہوگا۔
function applyPageRedactions(
page,
pageRedactions
) {
const {
width: pdfWidth,
height: pdfHeight
} = page.getSize();
const canvas =
document.getElementById(
"pdfCanvas"
);
const scaleX =
pdfWidth / canvas.width;
const scaleY =
pdfHeight / canvas.height;
pageRedactions.forEach(
redaction => {
const x =
redaction.x * scaleX;
const width =
redaction.width * scaleX;
const height =
redaction.height * scaleY;
const y =
pdfHeight -
(
redaction.y +
redaction.height
) * scaleY;
page.drawRectangle({
x,
y,
width,
height,
color:
PDFLib.rgb(0, 0, 0)
});
}
);
}
یہاں سیاہ مستطیل کسی بھی باقی براؤزر کے صرف پیش نظارہ عناصر کے بجائے تیار کردہ پی ڈی ایف صفحہ کے مواد پر لکھا جاتا ہے۔
آخری پروسیس شدہ دستاویز کو محفوظ کرتا ہے۔
const outputBytes =
await pdfDoc.save();
const outputBlob =
new Blob(
[outputBytes],
{
type: "application/pdf"
}
);
showFinalPreview(outputBlob);
یہ فرق اہم ہے کیونکہ صرف بصری نتائج کو اس بات کے ثبوت کے طور پر استعمال نہیں کیا جانا چاہیے کہ پوشیدہ مواد کو محفوظ طریقے سے ہٹا دیا گیا ہے۔
حتمی پی ڈی ایف کا جائزہ اور نام تبدیل کریں۔
کسی دستاویز کو ڈاؤن لوڈ کرنے سے پہلے، صارفین کو پروسیس شدہ صفحات کا جائزہ لینے کے قابل ہونا چاہیے۔
حتمی پیش نظارہ آپ کو اس بات کو یقینی بنانے میں مدد کرے گا کہ ہر منتخب کردہ علاقہ جہاں توقع کی جاتی ہے ظاہر ہوتا ہے۔
پروسیس شدہ فائل سے ایک نئی PDF.js دستاویز بنائیں۔
async function showFinalPreview(blob) {
const bytes =
await blob.arrayBuffer();
const finalPdf =
await pdfjsLib
.getDocument({
data: bytes
})
.promise;
renderFinalPage(
finalPdf,
1
);
}
پیش نظارہ میں، آپ وہی صفحہ نیویگیشن طریقہ استعمال کر سکتے ہیں جو آپ نے پہلے استعمال کیا تھا۔
let finalPage = 1;
nextFinalPage.addEventListener(
"click",
async () => {
if (
finalPage >=
finalPdf.numPages
) {
return;
}
finalPage++;
await renderFinalPage(
finalPdf,
finalPage
);
}
);
صارف تیار کردہ پی ڈی ایف کو نیویگیٹ کر سکتے ہیں اور فائل کو محفوظ کرنے سے پہلے لاگو ایریا کو بصری طور پر چیک کر سکتے ہیں۔
یہ ٹول صارفین کو آؤٹ پٹ فائل کا نام تبدیل کرنے کی بھی اجازت دیتا ہے۔
مثال کے طور پر، خود بخود پیدا ہونے والا نام ہے:
combined-images (12)_redacted.pdf
ایک قابل تدوین فائل کا نام ان پٹ بناتا ہے۔
ڈاؤن لوڈ کرنے سے پہلے، یقینی بنائیں کہ فائل کا نام اس کے ساتھ ختم ہوتا ہے: .pdf.
function getOutputFilename() {
let filename =
outputFilename.value.trim();
if (
!filename
.toLowerCase()
.endsWith(".pdf")
) {
filename += ".pdf";
}
return filename;
}
فائل کے نام میں تبدیلی کی اجازت دینا مفید ہے جب صارفین ایک ہی دستاویز کے متعدد ورژنز کے ساتھ کام کر رہے ہوں۔
فائنل پی ڈی ایف ڈاؤن لوڈ کریں۔
حتمی نتائج کا سیکشن پروسیس شدہ دستاویزات کے بارے میں بنیادی معلومات دکھاتا ہے۔
اس پروجیکٹ میں، صارف ڈاؤن لوڈ کرنے سے پہلے فائل کا نام، صفحات کی کل تعداد اور حتمی فائل کا سائز دیکھ سکتے ہیں۔
میگا بائٹس میں فائل کے سائز کا حساب لگائیں۔
function formatFileSize(bytes) {
return (
bytes / 1024 / 1024
).toFixed(2) + " MB";
}
نتائج کی معلومات کو اپ ڈیٹ کریں۔
filePageCount.textContent =
`Total Pages: ${pdfDocument.numPages}`;
fileSize.textContent =
`File Size: ${
formatFileSize(
outputBlob.size
)
}`;
دستاویز ڈاؤن لوڈ کرنے کے لیے، ایک عارضی آبجیکٹ URL بنائیں۔
downloadButton.addEventListener(
"click",
() => {
const url =
URL.createObjectURL(
outputBlob
);
const link =
document.createElement("a");
link.href = url;
link.download =
getOutputFilename();
link.click();
URL.revokeObjectURL(url);
}
);
براؤزر آپ کے منتخب کردہ فائل نام کا استعمال کرتے ہوئے تیار کردہ پی ڈی ایف ڈاؤن لوڈ کرے گا۔
.ڈاؤن لوڈ کرنے کے بعد، صارفین نیکسٹ پر کلک کر سکتے ہیں۔ دوبارہ شروع کریں موجودہ دستاویز کو صاف کرنے اور دوسری پی ڈی ایف پر کارروائی کرنے کے لیے
function resetTool() {
pdfDocument = null;
pdfBytes = null;
redactions = {};
currentPage = 1;
pdfInput.value = "";
showUploadSection();
}
پورا پروسیسنگ ورک فلو اب منسلک ہے۔ صارف صفحہ کے علاقوں کو نشان زد کر سکتے ہیں، اپنے انتخاب کو لاگو کر سکتے ہیں، نتائج کا پیش نظارہ کر سکتے ہیں، تیار کردہ فائل کا نام تبدیل کر سکتے ہیں، تفصیلات کا جائزہ لے سکتے ہیں، اور پروسیس شدہ پی ڈی ایف ڈاؤن لوڈ کر سکتے ہیں۔
اب جبکہ ہمارے پاس ایڈیٹنگ کا پورا ورک فلو منسلک ہے، آئیے اپ لوڈ سے لے کر ڈاؤن لوڈ تک ایپلیکیشن کے ذریعے چلتے ہیں۔
مرحلہ 1: اپنی پی ڈی ایف دستاویز اپ لوڈ کریں۔
صارفین ڈریگ اینڈ ڈراپ ایریا یا کے ذریعے پی ڈی ایف اپ لوڈ کر سکتے ہیں۔ پی ڈی ایف منتخب کریں۔ بٹن
براؤزر فائل کی توثیق کرتا ہے، دستاویز کو میموری میں پڑھتا ہے، اور اسے مقامی پروسیسنگ کے لیے تیار کرتا ہے۔ اس ورک فلو کو بیک اینڈ سرور کی ضرورت نہیں ہے۔
مرحلہ 2: پی ڈی ایف کا جائزہ اور دریافت کریں۔
فائل لوڈ ہونے پر، موجودہ پی ڈی ایف صفحہ پیش نظارہ کے علاقے کے اندر ظاہر ہوگا۔
صفحہ نیویگیشن کنٹرولز صارفین کو دستاویز کے ذریعے آگے پیچھے جانے کی اجازت دیتے ہیں۔ موجودہ صفحہ نمبر اور صفحات کی کل تعداد پیش نظارہ کے نیچے ظاہر ہوتی ہے۔
صارفین پہلے دستاویز کا جائزہ لے سکتے ہیں اور پھر اس صفحہ پر تشریف لے جا سکتے ہیں جس میں وہ معلومات شامل کرنا چاہتے ہیں۔
مرحلہ 3: انشانکن کو ترتیب دیں۔
پروفنگ کی ترتیبات پی ڈی ایف پیش نظارہ کے آگے ظاہر ہوتی ہیں۔
صارف دستاویز پر مستطیل کھینچنے کے لیے حساس علاقوں پر کلک اور گھسیٹتے ہیں۔ منتخب کردہ علاقہ ایک گہرے اوورلے کے طور پر ظاہر ہوتا ہے، یہ دیکھنا آسان بناتا ہے کہ آپ نے اسے کہاں منتخب کیا ہے۔
صفحہ ایپلیکیشن کنٹرولز صارفین کو یہ انتخاب کرنے کی بھی اجازت دیتے ہیں کہ آیا موجودہ صفحہ، تمام صفحات، یا مخصوص صفحہ نمبروں پر اسی ترمیمی مقام کا اطلاق کرنا ہے۔
یہ اس وقت کارآمد ہوتا ہے جب ایک ہی فیلڈز ایک سے زیادہ صفحات پر مستقل جگہوں پر ظاہر ہوں۔
مرحلہ 4: متعدد انشانکن علاقوں کا نظم کریں۔
ایک ہی صفحہ کا احاطہ کرنے کے لیے متعدد علاقے شامل ہو سکتے ہیں۔
مثال کے طور پر، صارف صفحہ کے اوپری حصے کے قریب ایک نام اور دستاویز کے نیچے کے قریب دیگر معلومات کا انتخاب کر سکتے ہیں۔
ہر انتخاب کو الگ سے دکھایا جاتا ہے جیسا کہ: ترمیم نمبر 1، ترمیم نمبر 2وغیرہ
انفرادی ہٹانے کے کنٹرولز صارفین کو دوسرے آئٹمز کو متاثر کیے بغیر ایک انتخاب کو حذف کرنے کی اجازت دیتے ہیں۔ کہ اس صفحہ سے سب کو صاف کریں۔ آپشن فعال صفحہ سے تمام ترمیمی علاقوں کو ہٹا دیتا ہے۔
یہ صارفین کو پی ڈی ایف پر کارروائی کرنے سے پہلے اپنے انتخاب میں ترمیم کرنے کی اجازت دیتا ہے۔
مرحلہ 5: پی ڈی ایف کو لاگو اور حتمی شکل دیں۔
اصلاح کا علاقہ اور ہدف کا صفحہ تیار ہونے کے بعد، صارف کر سکتا ہے۔ درخواست اور تکمیل.
ایپلیکیشن براؤزر سلیکشن کوآرڈینیٹس کو پی ڈی ایف پیج کوآرڈینیٹ میں تبدیل کرتی ہے اور پروسیس شدہ دستاویز تیار کرتے وقت منتخب صفحات پر ایک مبہم خطہ لاگو کرتی ہے۔
اگر غلط پی ڈی ایف اپ لوڈ کی گئی تھی یا صارف دوبارہ شروع کرنا چاہتا ہے۔ دوبارہ شروع کریں بٹن دبانے سے موجودہ ورک فلو ری سیٹ ہو جاتا ہے۔
مرحلہ 6: پروسیس شدہ پی ڈی ایف کا جائزہ لیں۔
پروسیسنگ مکمل ہونے کے بعد، تیار کردہ پی ڈی ایف ایک نئے پیش نظارہ سیکشن میں ظاہر ہوگی۔
صارف دستاویز کو نیویگیٹ کر سکتے ہیں اور بصری طور پر تصدیق کر سکتے ہیں کہ منتخب کردہ علاقہ متوقع جگہ میں شامل ہے۔
جائزہ لینے کا یہ مرحلہ اہم ہے۔ چھوٹے نقاط یا صفحہ کے انتخاب کی غلطیاں دوسرے صفحات پر معلومات کو ظاہر کرنے کا سبب بن سکتی ہیں۔
مرحلہ 7: پی ڈی ایف کا نام تبدیل کریں۔
ڈاؤن لوڈ کرنے سے پہلے، صارف تیار کردہ فائل کے نام میں ترمیم کر سکتے ہیں۔
درخواستیں خود بخود شامل کی جا سکتی ہیں۔ _redacted اس کا نام اصل فائل کے نام پر رکھ دیا جائے گا، لیکن آپ اس کا نام تبدیل کر کے کسی ایسی چیز پر رکھ سکتے ہیں جو آپ کے دستاویز کے ورک فلو کے مطابق ہو۔
مثال کے طور پر:
customer-record_redacted.pdf
یا:
public-report-copy.pdf
مرحلہ 8: فائل کی تفصیلات کا جائزہ لیں اور ڈاؤن لوڈ کریں۔
آخری سیکشن آؤٹ پٹ فائل کا نام، صفحات کی تعداد، اور تیار کردہ فائل کا سائز دکھاتا ہے۔
ان تفصیلات کا جائزہ لینے کے بعد، صارف نیکسٹ پر کلک کرتا ہے۔ ڈاؤن لوڈ کریں پی ڈی ایف کو مقامی طور پر محفوظ کریں۔
براؤزر پروسیس شدہ دستاویز کے ڈیٹا سے براہ راست ڈاؤن لوڈ کرتا ہے۔
مرحلہ 9: ایک مختلف پی ڈی ایف کے ساتھ دوبارہ شروع کریں۔
فائل ڈاؤن لوڈ کرنے کے بعد، صارفین نیکسٹ پر کلک کر سکتے ہیں۔ دوبارہ شروع کریں.
ایپلیکیشن اپ لوڈ انٹرفیس پر واپس آنے سے پہلے موجودہ پی ڈی ایف، صفحہ کے پیش نظارہ، محفوظ کردہ نقاط، اور پیدا کردہ نتائج کو صاف کرتی ہے۔
اس کے بعد صارفین اپنے براؤزر کو دستی طور پر ریفریش کیے بغیر دیگر دستاویزات پر کارروائی کر سکتے ہیں۔
ترمیم شدہ پی ڈی ایف کو کیسے چیک کریں۔
پیش نظارہ میں درست نظر آنے والی دستاویزات کو شیئر کرنے سے پہلے تصدیق کر لینی چاہیے۔
سب سے پہلے، تمام متاثرہ صفحات کو دریافت کریں اور یقینی بنائیں کہ ہر مطلوبہ علاقہ مکمل طور پر احاطہ کرتا ہے۔ متعدد صفحات پر لاگو ہونے والے پروفنگ پر خاص توجہ دیں، کیونکہ صفحہ کی ترتیب ہمیشہ ایک جیسی نہیں ہو سکتی۔
ایپلیکیشن اس بات کا تعین کرنے کے لیے ایک سادہ جانچ کر سکتی ہے کہ آیا حتمی شکل دینے سے پہلے کوئی اصلاحی علاقہ موجود ہے۔
const totalRedactions =
Object.values(redactions)
.reduce(
(total, items) =>
total + items.length,
0
);
if (totalRedactions === 0) {
alert(
"No redaction areas were added."
);
return;
}
آپ کو یہ بھی یقینی بنانا ہوگا کہ تمام منتخب کردہ ہدف والے صفحات موجود ہیں۔
const validPages =
targetPages.every(page =>
page >= 1 &&
page <= pdfDocument.numPages
);
بصری ماسکنگ ورک فلو کے لیے، جیسا کہ مستطیل پر مبنی نفاذ یہاں دکھایا گیا ہے، ایک مبہم مستطیل ہے اکیلے یہ ثابت نہیں کرتا کہ بنیادی پی ڈی ایف مواد کو محفوظ طریقے سے ہٹا دیا گیا ہے۔.
اگر آپ کی دستاویز میں قانونی طور پر محفوظ معلومات، سرفہرست خفیہ معلومات، یا تعمیل سے متعلق حساس معلومات شامل ہیں، تو معیار پر مبنی ترمیم اور حذف کرنے کا عمل استعمال کریں جو بنیادی مواد کے اعتراض کو ہٹاتا ہے، پھر اشتراک کرنے سے پہلے متن کے انتخاب، دریافت ہونے، تشریحات، میٹا ڈیٹا اور دیگر قابل بازیافت مواد کے نتائج کی جانچ کریں۔
توثیق کا یہ امتیاز ادارتی منصوبوں میں خاص طور پر اہم ہے۔
کارکردگی کی اصلاح کے نکات
پی ڈی ایف ایڈیٹنگ بذات خود آسان معلوم ہوسکتی ہے، لیکن بڑی فائلوں کے ساتھ کام کرتے وقت پیج رینڈرنگ اور دستاویز کی تخلیق براؤزر کی اہم میموری کو استعمال کرسکتی ہے۔
تمام پی ڈی ایف صفحات کو ایک ہی وقت میں مکمل ریزولوشن میں پیش کرنے سے گریز کریں۔ فعال صفحہ کو رینڈر کرتا ہے جیسے ہی صارف نیویگیٹ کرتا ہے۔
await renderPage(currentPage);
کینوس کی پوری تصویر کو ذخیرہ کرنے کے بجائے، ہم کیلیبریشن کوآرڈینیٹس کو ایک چھوٹے JavaScript آبجیکٹ کے طور پر اسٹور کرتے ہیں۔
redactions[currentPage].push({
x,
y,
width,
height
});
آؤٹ پٹ پیدا کرتے وقت، صرف ان صفحات میں ترمیم کریں جن کی آپ کو ضرورت ہے۔
for (
const pageNumber of targetPages
) {
const page =
pages[pageNumber - 1];
applyPageRedactions(
page,
sourceRedactions
);
}
عارضی آبجیکٹ URLs کو بھی استعمال کے بعد آزاد کیا جانا چاہیے۔
URL.revokeObjectURL(url);
یہ انتخاب انٹرفیس کو جوابدہ رکھتا ہے اور میموری کے غیر ضروری استعمال کو کم کرتا ہے، خاص طور پر طویل رپورٹس یا کثیر صفحاتی کاروباری دستاویزات پر کارروائی کرتے وقت۔
اہم نوٹس اور عام غلطیاں
انشانکن انٹرفیس میں سب سے عام غلطی غلط کوآرڈینیٹ ٹرانسفارمیشن ہے۔
کینوس کے پیش نظارہ اور اصل PDF صفحات کا سائز مختلف ہو سکتا ہے۔ براہ راست پی ڈی ایف پر براؤزر کوآرڈینیٹ لگانے سے مستطیل مطلوبہ مواد سے ہٹ سکتا ہے۔
ہمیشہ پہلے اسکیل ویلیو کا حساب لگائیں۔
const scaleX =
pdfWidth / canvas.width;
const scaleY =
pdfHeight / canvas.height;
ایک اور غلطی یہ بھول رہی ہے کہ پی ڈی ایف اور کینوس وائی کوآرڈینیٹ مختلف اصلیت استعمال کر سکتے ہیں۔
const pdfY =
pdfHeight -
(
redaction.y +
redaction.height
) * scaleY;
تمام صفحات پر ایک انتخاب کا اطلاق کرتے وقت صارفین کو بھی محتاط رہنا چاہیے۔ ہیڈرز پوری دستاویز میں ایک ہی جگہ پر ظاہر ہو سکتے ہیں، لیکن دوسرے صفحہ کی ترتیب تبدیل ہو سکتی ہے۔ ہمیشہ پروسیس شدہ نتائج کا جائزہ لیں۔
پروسیسنگ سے پہلے حسب ضرورت صفحہ کے دائرہ کار کی توثیق کریں۔
targetPages =
targetPages.filter(page =>
Number.isInteger(page) &&
page >= 1 &&
page <= pdfDocument.numPages
);
آخر میں، بصری طور پر غیر واضح علاقوں کو محفوظ طریقے سے ہٹائے گئے کے طور پر بیان نہ کریں جب تک کہ آپ کا نفاذ اصل میں پی ڈی ایف ڈھانچے سے بنیادی متن، تصاویر، تشریحات، اور متعلقہ مواد کو ہٹا نہیں دیتا ہے۔
سادہ براؤزر پروجیکٹس کے لیے، مبہم ماسکنگ کوآرڈینیٹ میپنگ اور پی ڈی ایف ترمیم کے لیے اچھی طرح کام کرتی ہے۔ حساس معلومات کو سنبھالنے والے پروڈکشن ایڈیٹنگ سسٹمز کو زیادہ مضبوط مواد کو ہٹانے اور آؤٹ پٹ سینیٹائزیشن منطق کی ضرورت ہوتی ہے۔
نتیجہ
اس ٹیوٹوریل میں، ہم نے براؤزر پر مبنی پی ڈی ایف ایڈیٹنگ انٹرفیس بنانے کے لیے JavaScript کا استعمال کیا۔
آپ نے پی ڈی ایف اپ لوڈ کرنے، دستاویز کے صفحات کو PDF.js کے ساتھ رینڈر کرنے، صفحات کے درمیان نیویگیٹ کرنے، ریڈیکشن ریجنز ڈرا کرنے، مستطیل نقاط کو اسٹور کرنے، متعدد انتخابوں کا نظم کرنے، ٹارگٹ پیجز کو منتخب کرنے، کینوس کوآرڈینیٹ کو PDF کوآرڈینیٹس میں تبدیل کرنے، پروسیس شدہ PDF بنانے، نتائج کا پیش نظارہ، آؤٹ پٹ فائل کا نام تبدیل کرنے اور اسے مقامی طور پر ڈاؤن لوڈ کرنے کا طریقہ سیکھا۔
ہم نے سیکیورٹی کے اہم فرق کی بھی نشاندہی کی۔ مبہم مستطیل کے ساتھ مواد کو بصری طور پر دھندلا کرنا خود بخود بنیادی PDF مواد کو مستقل طور پر ہٹانے کے مترادف نہیں ہے۔ سیکھنے کے منصوبے سے پروڈکشن لیول ایڈیٹنگ سسٹم میں منتقل ہونے پر یہ اختلافات اہم ہیں۔
پی ڈی ایف پروفنگ ٹولز کے ساتھ براؤزر پر مبنی ورک فلو کو دریافت کریں۔
کوآرڈینیٹ اور صفحہ پروسیسنگ ورک فلو کو سمجھنا آپ کو اپنے پروجیکٹس کو قابل تلاش متن کی شناخت، خودکار پیٹرن کی شناخت، تشریح کی صفائی، میٹا ڈیٹا کو حذف کرنے، ترمیم کی تصدیق، یا حقیقی مواد کو ہٹانے والی پائپ لائنوں کے ساتھ بڑھانے کی اجازت دیتا ہے۔
آپ پی ڈی ایف تشریح، دستخط، ہائی لائٹنگ، کراپنگ، اور دستاویز کے جائزے کے ٹولز بناتے وقت انہی کوآرڈینیٹ میپنگ تصورات کو دوبارہ استعمال کر سکتے ہیں۔