将pdf转换为png格式的数组'；s使用javascript（带pdf.js）
我试图开发一个前端代码，要求用户提供pdf，然后在内部（在用户浏览器中）生成一个png数组（通过数据到url），其中数组中的每个条目对应于pdf中的一个页面： dat[0]=第1页的png将pdf转换为png格式的数组'；s使用javascript（带pdf.js）,javascript,pdf,frontend,png,pdf.js,Javascript,Pdf,Frontend,Png,Pdf.js,我试图开发一个前端代码，要求用户提供pdf，然后在内部（在用户浏览器中）生成一个png数组（通过数据到url），其中数组中的每个条目对应于pdf中的一个页面： dat[0]=第1页的png dat[1]=第2页的png 当我测试下面的代码时，页面以某种方式呈现在彼此的顶部并旋转 <script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js">
dat[1]=第2页的png
当我测试下面的代码时，页面以某种方式呈现在彼此的顶部并旋转
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script><html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/pdfjs-helloworld-v2/8598/edit
-->
<body>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
<input id='pdf' type='file'/>
<!-- Use latest PDF.js build from Github -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>
<script type="text/javascript">
//
// Asynchronous download PDF as an ArrayBuffer
//
dat = [];
var pdf = document.getElementById('pdf');
pdf.onchange = function(ev) {
if (file = document.getElementById('pdf').files[0]) {
fileReader = new FileReader();
fileReader.onload = function(ev) {
//console.log(ev);
PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
//
// Fetch the first page
//
number_of_pages = pdf.numPages;
for(i = 1; i < number_of_pages+1; ++i) {
pdf.getPage(i).then(function getPageHelloWorld(page) {
var scale = 1;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport};
page.render(renderContext).then(function() {
dat.push(canvas.toDataURL('image/png'));
});
});
}
//console.log(pdf.numPages);
//console.log(pdf)
}, function(error){
console.log(error);
});
};
fileReader.readAsArrayBuffer(file);
}
}
</script>
<style id="jsbin-css">
</style>
<script>
</script>
</body>
</html>
//
//异步下载PDF作为ArrayBuffer
//
dat=[]；
var pdf=document.getElementById（'pdf'）；
pdf.onchange=函数（ev）{
if（file=document.getElementById（'pdf'）.files[0]）{
fileReader=新的fileReader（）；
fileReader.onload=函数（ev）{
//控制台日志（ev）；
getDocument（fileReader.result）。然后（函数getPdfHelloWorld（pdf）{
//
//取第一页
//
页数=pdf.numPages；
对于（i=1；i<页数+1；++i）{
然后（函数getPageHelloWorld（第页）{
var量表=1；
var viewport=page.getViewport（比例）；
//
//使用PDF页面维度准备画布
//
var canvas=document.getElementById（'the-canvas'）；
var context=canvas.getContext（'2d'）；
canvas.height=viewport.height；
canvas.width=viewport.width；
//
//将PDF页面呈现到画布上下文中
//
var renderContext={
背景：背景，
视口：视口}；
render（renderContext）.then（function（）{
数据推送（canvas.toDataURL（'image/png'）；
});
});
}
//console.log（pdf.numPages）；
//console.log（pdf）
}，函数（错误）{
console.log（错误）；
});
};
readAsArrayBuffer（文件）；
}
}
dat[1]=第1页的png和第2页的png相互旋转180度
如何确保在数组的每个条目中正确呈现单个页面？尝试在不同的画布上呈现页面。您可以创建
画布var canvasdiv = document.getElementById('canvas');
var canvas = document.createElement('canvas');
canvasdiv.appendChild(canvas);
var url='1〕https://file-examples-com.github.io/uploads/2017/10/file-sample_150kB.pdf';
var PDFJS=window['PDFJS-dist/build/pdf']；
PDFJS.GlobalWorkerOptions.workerSrc='/mozilla.github.io/pdf.js/build/pdf.worker.js'；
var loadingTask=PDFJS.getDocument（url）；
loadingTask.promise.then（函数（pdf）{
var canvasdiv=document.getElementById（'canvas'）；
var totalPages=pdf.numPages
var数据=[]；
对于（让pageNumber=1；pageNumber对于那些从谷歌来这里寻求角度解决方案的人，这里有一个实现，在不同的画布上呈现每个页面
pdf-viewer.component.html
<div *ngFor="let page of pages>
<canvas #canvas hidden ></canvas>
<img [src]="page">
</div>
import * as pdfjsLib from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';
@Component({
selector: 'app-pdf-viewer',
templateUrl: './pdf-viewer.component.html',
styleUrls: ['./pdf-viewer.component.scss'],
})
export class PdfViewerComponent implements OnInit {
constructor() { }
@ViewChildren('canvas') canvas: QueryList<ElementRef<HTMLCanvasElement>>;
@Input() pdfBase64: string;
pages: string[] = [];
ngOnInit(): void {
this.setPages();
}
async setPages(): Promise<void> {
const pdfDoc = await pdfjsLib.getDocument({ url: this.pdfBase64 }).promise;
const totalPages = pdfDoc.numPages;
this.pages = new Array(totalPages);
for (let i = 0; i < totalPages; i++) {
pdfDoc.getPage(i + 1).then((page) => {
const canvas = this.canvas.toArray()[page.pageIndex].nativeElement;
this.renderPdfPageToCanvas(page, canvas).then(() => {
this.pages[page.pageIndex] = canvas.toDataURL('image/png');
});
});
}
}
renderPdfPageToCanvas(page: pdfjsLib.PDFPageProxy, canvas: HTMLCanvasElement): pdfjsLib.PDFPromise<pdfjsLib.PDFPageProxy> {
const viewport = page.getViewport({ scale: 1.0 });
const height = viewport.height;
const width = viewport.width;
canvas.height = height;
canvas.width = width;
const renderContext = {
canvasContext: canvas.getContext('2d'),
viewport: viewport
};
return page.render(renderContext).promise;
}
}
{
...
"dependencies": {
...
"@angular/core": "^9.1.11",
"pdfjs-dist": "2.3.200"
},
"devDependencies": {
...
"@types/pdfjs-dist": "2.1.3"
}
}