[英]Javascript function await is only valid in async functions
让这个应用程序使用 OCR 读取图像文本并将其转换为 JSON 数组,然后将其写入 HTML 表并使用 phpspreedsheet 将其导出为 Excel 工作表,该应用程序到目前为止运行良好,直到我玩弄它并错过了一些东西之后 Javascript 函数不再起作用,因此它应该可以通过[Change.php]
将表格内容写入 Excel 文件
准备.js
function readFile(fileName) {
console.log({ fileName });
return await Tesseract.recognize(fileName, 'ara', {
logger: m => console.log(m)
});
}
function parseDataFromTextAndPropertyNames(text, propertyNames) {
console.log({ text, propertyNames });
return propertyNames
.reduce((table, key) =>
Object.assign(table, {
[ key ]: RegExp(`${ key }\\W+(\\w+)`)
.exec(text)?.[1] ?? ''
}), {});
}
function writeParsedTextDataAsJSON(fileName, table) {
console.log({ table });
JSON.stringify({ table });
// fake it ...
return (await new Promise(resolve =>
setTimeout(() => {
console.log({ fileName, json: JSON.stringify({ table }) });
resolve({ success: true });
}, 1500)
));
}
console.log('... running ...');
function start(filenames) {
const { data: { text } } = await readFile(filenames);
const data = await
parseDataFromTextAndPropertyNames(text, ['نقطة الخدمة', 'رقم العداد']);
document.getElementById("dvjson").innerHTML = JSON.stringify(data, undefined, 4);
const final = [JSON.stringify(data)];
const ff = [JSON.parse(final)];
constructTable('#table',ff);
htmlstring = getElementById('table').innerHTML();
$.post('change.php', {string:htmlstring}).done(function(response){
alert("done");
});
console.log({ result });
}
// construct JSON array to HTML Table
function constructTable(selector,data) {
// Getting the all column names
var cols = Headers(data, selector);
// Traversing the JSON data
for (var i = 0; i < data.length; i++) {
var row = $('<tr/>');
for (var colIndex = 0; colIndex < cols.length; colIndex++)
{
var val = data[i][cols[colIndex]];
// If there is any key, which is matching
// with the column name
if (val == null) val = "";
row.append($('<td/>').html(val));
}
// Adding each row to the table
$(selector).append(row);
}
}
function Headers(data, selector) {
var columns = [];
var header = $('<tr/>');
for (var i = 0; i < data.length; i++) {
var row = data[i];
for (var k in row) {
if ($.inArray(k, columns) == -1) {
columns.push(k);
// Creating the header
header.append($('<th/>').html(k));
}
}
}
// Appending the header to the table
$(selector).append(header);
return columns;
}
setTimeout(function() {
document.getElementById("loadspinne").style.display ="none";
document.getElementById("message").style.display = "block";
}, 8000);
准备.php
<script src='scripts\prepare.js'></script>
<?php
if (!empty($target_file)){
echo '<script>start("'.$target_file.'")</script>';
}
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
<script src='https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="style\main.css">
<script src="https://kit.fontawesome.com/bd514e8cb4.js" crossorigin="anonymous"></script>
<script src='excelexportjs.js'></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<center>
<div id="loadspinne" style="width: 12rem; height: 12rem; color:#0A9ACD;" class="spinner-border" role="status"></div>
</div>
<div class="animate__animated animate__backInDown mx-auto d-block" style="display:none !important;" id="message">
<h4 style="font-family:Hana; font-size:32px; font-weight:bold;">تم تكوين كشف بنجاح</h4>
</div>
</center>
<div class="container mt-5 ">
<div style="display:none;" id="dvjson"></div>
<table align="center" id="table" border="1" style="display:none;"></table>
</div>
</body>
</html>
更改.php
<?php
require 'vendor/autoload.php';
use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
use PhpOffice\PhpSpreadsheet\Reader\IReader;
$htmlString = $_GET['htmlstring'];
$reader = new \PhpOffice\PhpSpreadsheet\Reader\Html();
$spreadsheet = $reader->loadFromString($htmlString);
$writer = \PhpOffice\PhpSpreadsheet\IOFactory::createWriter($spreadsheet, 'Xls');
$writer->save('ddd.xls');
$spreadsheet = \PhpOffice\PhpSpreadsheet\IOFactory::load("ddd.xls");
$sheet = $spreadsheet->getActiveSheet();
$sheet->getColumnDimension('A')->setAutoSize(false);
$sheet->getColumnDimension('B')->setAutoSize(false);
$sheet->getColumnDimension('A')->setWidth(16);
$sheet->getColumnDimension('B')->setWidth(13);
$sheet->getStyle('A1:B1')->getFont()
->setName('Arial')
->setSize(14)
->setBold(true);
$writer = new Xlsx($spreadsheet);
$writer->save('ddd.xlsx');
// header('Location: ddd.xlsx');
?>
Cosnole 日志 [错误]:-
Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules (at prepare.js:4:10)
upload.php:4 Uncaught ReferenceError: start is not defined
at upload.php:4:9
(anonymous) @ upload.php:4
您的问题是您在某些函数中缺少async
关键字,因为无论何时使用await
都必须使用async关键字
异步函数是使用 async 关键字声明的函数,其中允许使用 await 关键字。 async 和 await 关键字使异步的、基于 Promise 的行为能够以更简洁的方式编写,避免了显式配置 Promise 链的需要。
async function readFile(fileName) {
console.log({ fileName });
return await Tesseract.recognize(fileName, 'ara', {
logger: m => console.log(m)
});
}
async function parseDataFromTextAndPropertyNames(text, propertyNames) {
console.log({ text, propertyNames });
return propertyNames
.reduce((table, key) =>
Object.assign(table, {
[ key ]: RegExp(`${ key }\\W+(\\w+)`)
.exec(text)?.[1] ?? ''
}), {});
}
async function start(filenames) {
const { data: { text } } = await readFile(filenames);
const data = await
parseDataFromTextAndPropertyNames(text, ['نقطة الخدمة', 'رقم العداد']);
document.getElementById("dvjson").innerHTML = JSON.stringify(data, undefined, 4);
const final = [JSON.stringify(data)];
const ff = [JSON.parse(final)];
constructTable('#table',ff);
htmlstring = getElementById('table').innerHTML();
$.post('change.php', {string:htmlstring}).done(function(response){
alert("done");
});
console.log({ result });
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.