我正在try 创建一个HTML网页，可以转换一个PDF文件为JPG图像，然后导出重新排列的页面作为一个新的PDF文件.
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<title>PDF pages rearranger</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<style>
/* Define the style for the container element */
#container {
width: 600px;
height: 400px;
border: 1px solid black;
margin: 20px auto;
overflow: auto;
}
/* Define the style for the image elements */
img {
width: 100px;
height: 100px;
margin: 10px;
cursor: move; /* Change the cursor to indicate that the images are draggable */
}
</style>
<!-- Load the jQuery library from a CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Load the jQuery UI library from a CDN -->
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<!-- Load the jsPDF library from a CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" accept=".pdf" />
<button id="convertButton">Convert to JPG</button>
<!-- Create a div element to hold the images -->
<div id="container"></div>
<!-- Create a button to export the rearranged pages as a new PDF file -->
<button id="exportButton">Export as PDF</button>
<script>
// Set the GlobalWorkerOptions.workerSrc property
window.GlobalWorkerOptions = {
workerSrc: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js'
};
const fileInput = document.getElementById('fileInput');
const convertButton = document.getElementById('convertButton');
const container = document.getElementById('container');
const exportButton = document.getElementById('exportButton');
convertButton.addEventListener('click', async () => {
const file = fileInput.files[0];
if (!file) {
alert('Please select a PDF file first');
return;
}
// Clear any existing images in the container
container.innerHTML = '';
const reader = new FileReader();
reader.onload = async (event) => {
const typedArray = new Uint8Array(event.target.result);
const pdfDocument = await pdfjsLib.getDocument(typedArray).promise;
const numPages = pdfDocument.numPages;
for (let i = 1; i <= numPages; i++) {
const page = await pdfDocument.getPage(i);
const viewport = page.getViewport({ scale: 1.0 });
const canvas = document.createElement('canvas');
canvas.width = viewport.width;
canvas.height = viewport.height;
const ctx = canvas.getContext('2d');
await page.render({ canvasContext: ctx, viewport }).promise;
const dataUrl = canvas.toDataURL('image/jpeg');
download(dataUrl, `page${i}.jpg`);
// Create an img element for each page and add it to the container
const img = document.createElement('img');
img.src = dataUrl;
img.alt = `Page ${i}`;
container.appendChild(img);
}
// Make the image elements draggable and sortable using jQuery UI
$("#container").sortable({
// Define a helper function to create a clone of the dragged image
helper: function(e, ui) {
return $(ui).clone().appendTo("#container").show();
}
});
};
reader.readAsArrayBuffer(file);
});
exportButton.addEventListener('click', () => {
// Create a new jsPDF instance
const doc = new jsPDF();
// Get all the img elements in the container
const images = container.querySelectorAll('img');
// Add each image to the PDF document
images.forEach((img, index) => {
if (index > 0) {
doc.addPage();
}
doc.addImage(img.src, 'JPEG', 10, 10);
});
// Save the PDF document
doc.save('rearranged.pdf');
});
function download(dataUrl, filename) {
const link = document.createElement('a');
link.href = dataUrl;
link.download = filename;
link.click();
}
</script>
</body>
</html>
然而，当我try 运行代码时，我遇到了两个问题:
当我单击"转换为JPG"按钮时，出现第一条警告消息，提示"不推荐使用API:未指定GlobalWorkerOptions.workerSrc".我想这是由于没有正确设置GlobalWorkerOptions.workerSrc属性造成的.
当我单击"导出为PDF"按钮时，出现第二条警告消息，提示"未定义unautReferenceError:jsPDF".因此，jsPDF库似乎没有正确加载.
谁能帮助我了解可能导致这些问题的原因，并提供如何解决这些问题的建议？
Edit:个
在@Alirahmon Nuraliev的帮助下，我的第一个问题解决了，但是第二个问题仍然没有解决，那就是UnautReferenceError:jsPDF is not fined.
我更正的代码如下:
<!DOCTYPE html>
<html>
<head>
<title>PDF pages rearranger</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<style>
/* Define the style for the container element */
#container {
width: 600px;
height: 400px;
border: 1px solid black;
margin: 20px auto;
overflow: auto;
}
/* Define the style for the image elements */
img {
width: 100px;
height: 100px;
margin: 10px;
cursor: move; /* Change the cursor to indicate that the images are draggable */
}
</style>
<!-- Load the jQuery library from a CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Load the jQuery UI library from a CDN -->
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" accept=".pdf" />
<button id="convertButton">Convert to JPG</button>
<!-- Create a div element to hold the images -->
<div id="container"></div>
<!-- Create a button to export the rearranged pages as a new PDF file -->
<button id="exportButton">Export as PDF</button>
<script>
// Set the GlobalWorkerOptions.workerSrc property
const workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';
const pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
const fileInput = document.getElementById('fileInput');
const convertButton = document.getElementById('convertButton');
const container = document.getElementById('container');
const exportButton = document.getElementById('exportButton');
convertButton.addEventListener('click', async () => {
const file = fileInput.files[0];
if (!file) {
alert('Please select a PDF file first');
return;
}
// Clear any existing images in the container
container.innerHTML = '';
const reader = new FileReader();
reader.onload = async (event) => {
const typedArray = new Uint8Array(event.target.result);
const pdfDocument = await pdfjsLib.getDocument(typedArray).promise;
const numPages = pdfDocument.numPages;
for (let i = 1; i <= numPages; i++) {
const page = await pdfDocument.getPage(i);
const viewport = page.getViewport({ scale: 1.0 });
const canvas = document.createElement('canvas');
canvas.width = viewport.width;
canvas.height = viewport.height;
const ctx = canvas.getContext('2d');
await page.render({ canvasContext: ctx, viewport }).promise;
const dataUrl = canvas.toDataURL('image/jpeg');
download(dataUrl, `page${i}.jpg`);
// Create an img element for each page and add it to the container
const img = document.createElement('img');
img.src = dataUrl;
img.alt = `Page ${i}`;
container.appendChild(img);
}
// Make the image elements draggable and sortable using jQuery UI
$("#container").sortable({
// Define a helper function to create a clone of the dragged image
helper: function(e, ui) {
return $(ui).clone().appendTo("#container").show();
}
});
};
reader.readAsArrayBuffer(file);
});
// Load jsPDF library and add event listener for export button
const jsPDFScript = document.createElement('script');
jsPDFScript.src =
'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
jsPDFScript.onload = () => {
exportButton.addEventListener('click', () => {
// Create a new jsPDF instance
const doc = new jsPDF();
// Get all the img elements in the container
const images = container.querySelectorAll('img');
// Add each image to the PDF document
images.forEach((img, index) => {
if (index > 0) {
doc.addPage();
}
doc.addImage(img.src, 'JPEG', 10, 10);
});
// Save the PDF document
doc.save('rearranged.pdf');
});
};
document.body.appendChild(jsPDFScript);
function download(dataUrl, filename) {
const link = document.createElement('a');
link.href = dataUrl;
link.download = filename;
link.click();
}
</script>
</body>
</html>