【前端】Vue中实现pdf逐页转图片，图片再逐张提取文字

给定场景：后端无法实现pdf转文字，由前端实现“pdf先转图片再转文字”。

方法：
假设我们在< template>中有一个元素存放我们处理过的canvas集合

<div id="canvasIDpdfs" />

我们给定一个按钮，编写click函数，通过点击按钮触发pdf先转图片再转文字的功能

this.pdfdata()

在< script>里编写函数

pdfdata() {const url = pdf路径;if (url) {const that = this;const canvasID = document.getElementById('canvasIDpdfs');// 引入插件库PDFJSPDFJS.getDocument({url,httpHeaders: {token: that.$cookie.get('token'),},}).then((pdfDoc_) => {if (pdfDoc_) {// 清空canvascanvasID.innerHTML = '';// 清空富文本this.editor.txt.clear();// 赋值that.pdfDoc = pdfDoc_;// 别名const pdfDoc = pdfDoc_;// 逐页for (let i = 1; i <= pdfDoc.numPages; i++) {// 传入页码与画布that.renderPage(i, canvasID);}}}).catch((e) => {console.log(`获取pdf文件失败，${e} `);});}
},renderPage(num, canvasID) {// 使用PDFJS能力this.pdfDoc.getPage(num).then((page) => {// 所有画布容器const canvasList = canvasID;// 新画布const canvas = document.createElement('canvas');// 存新画布canvasList.appendChild(canvas);// 绘图const ctx = canvas.getContext('2d');// 缩放const viewport = page.getViewport(1.5);// 尺寸canvas.height = viewport.height;canvas.width = viewport.width;// 使用PDFJS能力const renderContext = {canvasContext: ctx,viewport,};// 使用PDFJS能力const renderTask = page.render(renderContext);renderTask.promise.then(() => {// 新画布已绘制完成const latestCanvas =document.getElementById('canvasIDpdfs').getElementsByTagName('canvas')[num - 1].toDataURL("image/jpeg");// 对其进行图片转文字axios({url: 图片转文字的服务API,method: 'post',headers: {'Content-Type': 'application/json',token: Cookies.get('token'),},data: {image: latestCanvas.split('data:image/jpeg;base64,')[1],},}).then((res) => {// 得到文字if (res.result&& res.result > 0) {res.result.forEach((m) => {// 自定义样式const style = '';// 文字添加到富文本this.editor.txt.append(`<p style="${style}">${m.words}</p>`);});}});});});
},