Wordpress 中的 jsPDF 导致未捕获的类型错误（无法读取 属性 'length'）
jsPDF in Wordpress causing uncaught Type error (Cannot read property 'length')
嘿，我正在开发一个用于 wordpress 打印个人 PDF 的插件。
我自己 XAMPP 一切正常，但知道我遇到了这个错误。
我使用 Google API 和 canvas 函数生成二维码，将图像转换为 jsPDF 的 base64。
但在控制台中我收到此错误消息
但我不知道 jsPDF 库产生这个错误有什么问题
Uncaught TypeError: Cannot read property 'length' of undefined
at Object.jsPDFAPI.binaryStringToUint8Array (jspdf.debug.js:4197)
at Object.jsPDFAPI.addImage (jspdf.debug.js:4395)
at createPDF ((index):303)
这是我的代码：
<?php
/**
* The template for displaying single airdrop post type
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package airdrop
*/
get_header(); ?>
<?php
do_action( 'airdrop_wrapper' ); ?>
<?php
while ( have_posts() ) : the_post(); ?>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.1.1/jspdf.umd.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
<script type="text/javascript" src="https://platin-grading.de/wp-content/plugins/airdrop/templates/image.js"></script>
<div class="table">
<div class="row">
<div class="airdrop-thumbnail-wrap col-lg-5 col-md-5 col-sm-4 col-xs-12">
<figure class="airdrop-thumbnail">
<?php if( has_post_thumbnail() ) {
echo '<a rel="bookmark" href="'. esc_url( get_permalink() ) . '">';
the_post_thumbnail( 'airdrop-main-thumbnail' );
echo '</a>';
}
?>
</figure>
</div>
<?php
$name_pokemon = get_post_meta( get_the_ID(), 'name_pokemon', true );
$code_pokemon = get_post_meta( get_the_ID(), 'code_pokemon', true );
$lang_pokemon = get_post_meta( get_the_ID(), 'lang_pokemon', true );
$setname_pokemon = get_post_meta( get_the_ID(), 'setname_pokemon', true );
$zustand_pokemon = get_post_meta( get_the_ID(), 'zustand_pokemon', true );
$zustand_zahl_pokemon = get_post_meta( get_the_ID(), 'zustand_zahl_pokemon', true );
$code_card_pokemon = get_post_meta( get_the_ID(), 'code_card_pokemon', true );
$value_centering = get_post_meta( get_the_ID(), 'value_centering', true );
$value_corners = get_post_meta( get_the_ID(), 'value_corners', true );
$value_edges = get_post_meta( get_the_ID(), 'value_edges', true );
$value_surface = get_post_meta( get_the_ID(), 'value_surface', true );
$post_id = $post->ID;
?>
<div class="col-lg-7 col-md-7 col-sm-8 col-xs-12">
<table class="airdrop-single-summary" style="width: 100%; border-collapse: collapse;">
<tr>
<td colspan="2">
<i class="fas fa-user" style="font-size: 30px; color: #00b359;"> </i>
<h1 class="airdrop-name" style="padding-left: 15px;"> <?php echo esc_textarea( $name_pokemon ); ?></h1>
</td>
</tr>
<!-- Airdrop Token Symbol -->
<tr>
<td><span class="airdrop-symbol"><i class="fas fa-language" style="color: #00b359"></i> <?php _e( "Sprache", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $lang_pokemon ); ?></td>
</tr>
<tr>
<td><span class="airdrop-req"> <i class="fas fa-user-friends" style="color: #00b359"></i> <?php _e( "Name des Sets", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $setname_pokemon); ?></td>
</tr>
<tr>
<td><span class="airdrop-symbol"><i class="far fa-calendar-alt" style="color: #00b359"></i> <?php _e( "Veroeffentlicht im Jahr", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $code_pokemon ); ?></td>
</tr>
<tr>
<td><span class="airdrop-req"> <i class="far fa-comment" style="color: #00b359"></i> <?php _e( "Zustand (Worte)", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $zustand_pokemon) ; ?></td>
</tr>
<tr>
<td><span class="airdrop-req"> <i class="fas fa-star-half-alt" style="color: #00b359"></i> <?php _e( "Zustand (Zahl)", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $zustand_zahl_pokemon) ; ?></td>
</tr>
<tr>
<td><span class="airdrop-symbol"><i class="far fa-calendar-alt" style="color: #00b359"></i> <?php _e( "Veroeffentlicht im Jahr", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $code_pokemon ); ?></td>
</tr>
<tr>
<td><span class="airdrop-req"><i class="fas fa-barcode" style="color: #00b359"></i> <?php _e( "Kartencode", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $code_card_pokemon); ?></td>
</tr>
<tr>
<td><span class="airdrop-req"><i class="fas fa-star" style="color: #00b359"></i> <?php _e( "Bewertungen (falls vorhanden)", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( "Centering: " .$value_centering); ?><br>
<?php echo esc_textarea( "Corners: " .$value_corners); ?><br>
<?php echo esc_textarea( "Edges: " .$value_edges); ?><br>
<?php echo esc_textarea( "Surface: " .$value_surface); ?></td>
</tr>
<tr>
<td><span class="QR-Code">Qr-Code:</span></td>
<?php
$string = get_permalink();
$link = utf8_decode($string);
?>
<td><img id="qr" src="<?php echo 'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl='.$link.'&choe=UTF-8'?>" title="Link to PGS" crossorigin="anonymous" alt="QR-Code"></td>
</tr>
</table>
<button onclick="createPDFextra()">Print with Extra</button>
<button onclick="createPDF()">Print normal</button>
<script type="text/javascript">
let qrUrl = '<?php echo 'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl='.$link.'&choe=UTF-8'?>';
let qrCode;
function getDataUrl(img) {
// Create canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set width and height
canvas.width = img.width;
canvas.height = img.height;
// Draw the image
ctx.drawImage(img, 0, 0);
return canvas.toDataURL('image/png');
}
// Select the image
const img = document.querySelector('#qr');
img.addEventListener('load', function (event) {
const dataUrl = getDataUrl(event.currentTarget);
qrCode = dataUrl;
console.log(dataUrl);
});
</script>
<script>
// Default export is a4 paper, portrait, using millimeters for units
function createPDF(){
const doc = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a4',
putOnlyUsedFonts:true,
floatPrecision: 0 // or "smart", default is 16
});
doc.text("Etikett:", 10, 10);
doc.rect(10,20,63,20); //rectangle above
doc.rect(10,40,63,20); //rectangle below
doc.addImage(img_logo, 'JPEG', 10, 41, 18, 18); //Add Logo
doc.setFontSize(6);
doc.text("<?php echo $code_pokemon . " " . $setname_pokemon ?>", 30, 43); //Add Year and Setname of Card
doc.text("<?php echo $lang_pokemon ?>", 30, 45); //Add Language
doc.text("<?php echo "#" . $code_card_pokemon . " " . $name_pokemon?>", 30, 47); //Add Cardcode and Name
doc.setFontSize(30);
doc.text("<?php echo $zustand_zahl_pokemon?>", 63, 50, 'center'); //Add Number in BIG
doc.setFontSize(6);
doc.text("<?php echo $zustand_pokemon ?>", 63, 53, 'center'); //Add Number as word
//Rückseite
doc.addImage(qrCode, 'PNG' , 11, 21, 18, 18); //Add QR-Code
doc.text("<?php echo $post_id ?>", 22, 21,null,180); //Add POST-ID
doc.text("www.platin-grading.de", 55, 21,null,180); //Add Website URL
doc.save("test.pdf");
doc.output('dataurlnewwindow', 'test.pdf');
}
// Default export is a4 paper, portrait, using millimeters for units
function createPDFextra(){
const doc2 = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a4',
putOnlyUsedFonts:true,
floatPrecision: 0 // or "smart", default is 16
});
doc2.text("Etikett:", 10, 10);
doc2.rect(10,20,63,20); //rectangle above
doc2.rect(10,40,63,20); //rectangle below
doc2.addImage(img_logo, 'JPEG', 10, 41, 18, 18); //Add Logo
doc2.setFontSize(6);
doc2.text("<?php echo $code_pokemon . " " . $setname_pokemon ?>", 30, 43); //Add Year and Setname of Card
doc2.text("<?php echo $lang_pokemon ?>", 30, 45); //Add Language
doc2.text("<?php echo "#" . $code_card_pokemon . " " . $name_pokemon?>", 30, 47); //Add Cardcode and Name
doc2.setFontSize(4);
doc2.text("CENTERING: ", 30, 53);
doc2.text("<?php echo $value_centering ?>", 40, 53); //Add value of center
doc2.text("CORNERS: ", 45, 53);
doc2.text("<?php echo $value_corners ?>", 55, 53); //Add value of center
doc2.text("EDGES: ", 30, 55);
doc2.text("<?php echo $value_edges ?>", 40, 55); //Add value of center
doc2.text("SURFACE: ", 45, 55);
doc2.text("<?php echo $value_surface ?>", 55, 55); //Add value of center
doc2.setFontSize(30);
doc2.text("<?php echo $zustand_zahl_pokemon?>", 63, 50, 'center'); //Add Number in BIG
doc2.setFontSize(6);
doc2.text("<?php echo $zustand_pokemon ?>", 63, 53, 'center'); //Add Number as word
//Rückseite
doc2.addImage(qrCode, 'PNG' , 11, 21, 18, 18); //Add QR-Code
doc2.text("<?php echo $post_id ?>", 22, 21,null,180); //Add POST-ID
doc2.text("www.platin-grading.de", 55, 21,null,180); //Add Website URL
doc2.save("test.pdf");
doc2.output('dataurlnewwindow', 'test.pdf');
}
</script>
</div>
</div>
</div>
<?php
the_content();
the_post_navigation();
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
<!-- #primary -->
<?php do_action( 'airdrop_wrapper_close' ); ?>
<script src="https://kit.fontawesome.com/27b0ded188.js" crossorigin="anonymous"></script>
<?php
get_footer();
我不知道为什么它现在起作用了...
我将代码更改为：
<script type="text/javascript">
let qrUrl = '<?php echo 'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl='.$link.'&choe=UTF-8'?>';
let qrCode, qrCode2;
function getDataUrl(img) {
// Create canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set width and height
canvas.width = img.width;
canvas.height = img.height;
// Draw the image
ctx.drawImage(img, 0, 0);
return canvas.toDataURL('image/png');
}
// Select the image
const img = document.querySelector('#qr');
qrCode2 = getDataUrl(img);
console.log(qrCode2);
img.addEventListener('load', function (event) { //Dead Code
const dataUrl = getDataUrl(event.currentTarget);
const dataUrl2 = getDataUrl(img.getAttribute('src'));
qrCode = dataUrl;
console.log(dataUrl);
console.log(qrCode);
console.log(dataUrl2);
//document.writeln(qrCode2);
//document.writeln(dataUrl2);
});
</script>
所以我认为将图像放入 canvas 的函数是错误的，空字符串导致 jsPDF 中的错误
嘿，我正在开发一个用于 wordpress 打印个人 PDF 的插件。 我自己 XAMPP 一切正常，但知道我遇到了这个错误。
我使用 Google API 和 canvas 函数生成二维码，将图像转换为 jsPDF 的 base64。
但在控制台中我收到此错误消息
但我不知道 jsPDF 库产生这个错误有什么问题
Uncaught TypeError: Cannot read property 'length' of undefined
at Object.jsPDFAPI.binaryStringToUint8Array (jspdf.debug.js:4197)
at Object.jsPDFAPI.addImage (jspdf.debug.js:4395)
at createPDF ((index):303)
这是我的代码：
<?php
/**
* The template for displaying single airdrop post type
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package airdrop
*/
get_header(); ?>
<?php
do_action( 'airdrop_wrapper' ); ?>
<?php
while ( have_posts() ) : the_post(); ?>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.1.1/jspdf.umd.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
<script type="text/javascript" src="https://platin-grading.de/wp-content/plugins/airdrop/templates/image.js"></script>
<div class="table">
<div class="row">
<div class="airdrop-thumbnail-wrap col-lg-5 col-md-5 col-sm-4 col-xs-12">
<figure class="airdrop-thumbnail">
<?php if( has_post_thumbnail() ) {
echo '<a rel="bookmark" href="'. esc_url( get_permalink() ) . '">';
the_post_thumbnail( 'airdrop-main-thumbnail' );
echo '</a>';
}
?>
</figure>
</div>
<?php
$name_pokemon = get_post_meta( get_the_ID(), 'name_pokemon', true );
$code_pokemon = get_post_meta( get_the_ID(), 'code_pokemon', true );
$lang_pokemon = get_post_meta( get_the_ID(), 'lang_pokemon', true );
$setname_pokemon = get_post_meta( get_the_ID(), 'setname_pokemon', true );
$zustand_pokemon = get_post_meta( get_the_ID(), 'zustand_pokemon', true );
$zustand_zahl_pokemon = get_post_meta( get_the_ID(), 'zustand_zahl_pokemon', true );
$code_card_pokemon = get_post_meta( get_the_ID(), 'code_card_pokemon', true );
$value_centering = get_post_meta( get_the_ID(), 'value_centering', true );
$value_corners = get_post_meta( get_the_ID(), 'value_corners', true );
$value_edges = get_post_meta( get_the_ID(), 'value_edges', true );
$value_surface = get_post_meta( get_the_ID(), 'value_surface', true );
$post_id = $post->ID;
?>
<div class="col-lg-7 col-md-7 col-sm-8 col-xs-12">
<table class="airdrop-single-summary" style="width: 100%; border-collapse: collapse;">
<tr>
<td colspan="2">
<i class="fas fa-user" style="font-size: 30px; color: #00b359;"> </i>
<h1 class="airdrop-name" style="padding-left: 15px;"> <?php echo esc_textarea( $name_pokemon ); ?></h1>
</td>
</tr>
<!-- Airdrop Token Symbol -->
<tr>
<td><span class="airdrop-symbol"><i class="fas fa-language" style="color: #00b359"></i> <?php _e( "Sprache", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $lang_pokemon ); ?></td>
</tr>
<tr>
<td><span class="airdrop-req"> <i class="fas fa-user-friends" style="color: #00b359"></i> <?php _e( "Name des Sets", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $setname_pokemon); ?></td>
</tr>
<tr>
<td><span class="airdrop-symbol"><i class="far fa-calendar-alt" style="color: #00b359"></i> <?php _e( "Veroeffentlicht im Jahr", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $code_pokemon ); ?></td>
</tr>
<tr>
<td><span class="airdrop-req"> <i class="far fa-comment" style="color: #00b359"></i> <?php _e( "Zustand (Worte)", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $zustand_pokemon) ; ?></td>
</tr>
<tr>
<td><span class="airdrop-req"> <i class="fas fa-star-half-alt" style="color: #00b359"></i> <?php _e( "Zustand (Zahl)", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $zustand_zahl_pokemon) ; ?></td>
</tr>
<tr>
<td><span class="airdrop-symbol"><i class="far fa-calendar-alt" style="color: #00b359"></i> <?php _e( "Veroeffentlicht im Jahr", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $code_pokemon ); ?></td>
</tr>
<tr>
<td><span class="airdrop-req"><i class="fas fa-barcode" style="color: #00b359"></i> <?php _e( "Kartencode", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( $code_card_pokemon); ?></td>
</tr>
<tr>
<td><span class="airdrop-req"><i class="fas fa-star" style="color: #00b359"></i> <?php _e( "Bewertungen (falls vorhanden)", 'airdrop' ); ?></span></td>
<td><?php echo esc_textarea( "Centering: " .$value_centering); ?><br>
<?php echo esc_textarea( "Corners: " .$value_corners); ?><br>
<?php echo esc_textarea( "Edges: " .$value_edges); ?><br>
<?php echo esc_textarea( "Surface: " .$value_surface); ?></td>
</tr>
<tr>
<td><span class="QR-Code">Qr-Code:</span></td>
<?php
$string = get_permalink();
$link = utf8_decode($string);
?>
<td><img id="qr" src="<?php echo 'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl='.$link.'&choe=UTF-8'?>" title="Link to PGS" crossorigin="anonymous" alt="QR-Code"></td>
</tr>
</table>
<button onclick="createPDFextra()">Print with Extra</button>
<button onclick="createPDF()">Print normal</button>
<script type="text/javascript">
let qrUrl = '<?php echo 'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl='.$link.'&choe=UTF-8'?>';
let qrCode;
function getDataUrl(img) {
// Create canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set width and height
canvas.width = img.width;
canvas.height = img.height;
// Draw the image
ctx.drawImage(img, 0, 0);
return canvas.toDataURL('image/png');
}
// Select the image
const img = document.querySelector('#qr');
img.addEventListener('load', function (event) {
const dataUrl = getDataUrl(event.currentTarget);
qrCode = dataUrl;
console.log(dataUrl);
});
</script>
<script>
// Default export is a4 paper, portrait, using millimeters for units
function createPDF(){
const doc = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a4',
putOnlyUsedFonts:true,
floatPrecision: 0 // or "smart", default is 16
});
doc.text("Etikett:", 10, 10);
doc.rect(10,20,63,20); //rectangle above
doc.rect(10,40,63,20); //rectangle below
doc.addImage(img_logo, 'JPEG', 10, 41, 18, 18); //Add Logo
doc.setFontSize(6);
doc.text("<?php echo $code_pokemon . " " . $setname_pokemon ?>", 30, 43); //Add Year and Setname of Card
doc.text("<?php echo $lang_pokemon ?>", 30, 45); //Add Language
doc.text("<?php echo "#" . $code_card_pokemon . " " . $name_pokemon?>", 30, 47); //Add Cardcode and Name
doc.setFontSize(30);
doc.text("<?php echo $zustand_zahl_pokemon?>", 63, 50, 'center'); //Add Number in BIG
doc.setFontSize(6);
doc.text("<?php echo $zustand_pokemon ?>", 63, 53, 'center'); //Add Number as word
//Rückseite
doc.addImage(qrCode, 'PNG' , 11, 21, 18, 18); //Add QR-Code
doc.text("<?php echo $post_id ?>", 22, 21,null,180); //Add POST-ID
doc.text("www.platin-grading.de", 55, 21,null,180); //Add Website URL
doc.save("test.pdf");
doc.output('dataurlnewwindow', 'test.pdf');
}
// Default export is a4 paper, portrait, using millimeters for units
function createPDFextra(){
const doc2 = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a4',
putOnlyUsedFonts:true,
floatPrecision: 0 // or "smart", default is 16
});
doc2.text("Etikett:", 10, 10);
doc2.rect(10,20,63,20); //rectangle above
doc2.rect(10,40,63,20); //rectangle below
doc2.addImage(img_logo, 'JPEG', 10, 41, 18, 18); //Add Logo
doc2.setFontSize(6);
doc2.text("<?php echo $code_pokemon . " " . $setname_pokemon ?>", 30, 43); //Add Year and Setname of Card
doc2.text("<?php echo $lang_pokemon ?>", 30, 45); //Add Language
doc2.text("<?php echo "#" . $code_card_pokemon . " " . $name_pokemon?>", 30, 47); //Add Cardcode and Name
doc2.setFontSize(4);
doc2.text("CENTERING: ", 30, 53);
doc2.text("<?php echo $value_centering ?>", 40, 53); //Add value of center
doc2.text("CORNERS: ", 45, 53);
doc2.text("<?php echo $value_corners ?>", 55, 53); //Add value of center
doc2.text("EDGES: ", 30, 55);
doc2.text("<?php echo $value_edges ?>", 40, 55); //Add value of center
doc2.text("SURFACE: ", 45, 55);
doc2.text("<?php echo $value_surface ?>", 55, 55); //Add value of center
doc2.setFontSize(30);
doc2.text("<?php echo $zustand_zahl_pokemon?>", 63, 50, 'center'); //Add Number in BIG
doc2.setFontSize(6);
doc2.text("<?php echo $zustand_pokemon ?>", 63, 53, 'center'); //Add Number as word
//Rückseite
doc2.addImage(qrCode, 'PNG' , 11, 21, 18, 18); //Add QR-Code
doc2.text("<?php echo $post_id ?>", 22, 21,null,180); //Add POST-ID
doc2.text("www.platin-grading.de", 55, 21,null,180); //Add Website URL
doc2.save("test.pdf");
doc2.output('dataurlnewwindow', 'test.pdf');
}
</script>
</div>
</div>
</div>
<?php
the_content();
the_post_navigation();
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
<!-- #primary -->
<?php do_action( 'airdrop_wrapper_close' ); ?>
<script src="https://kit.fontawesome.com/27b0ded188.js" crossorigin="anonymous"></script>
<?php
get_footer();
我不知道为什么它现在起作用了...
我将代码更改为：
<script type="text/javascript">
let qrUrl = '<?php echo 'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl='.$link.'&choe=UTF-8'?>';
let qrCode, qrCode2;
function getDataUrl(img) {
// Create canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set width and height
canvas.width = img.width;
canvas.height = img.height;
// Draw the image
ctx.drawImage(img, 0, 0);
return canvas.toDataURL('image/png');
}
// Select the image
const img = document.querySelector('#qr');
qrCode2 = getDataUrl(img);
console.log(qrCode2);
img.addEventListener('load', function (event) { //Dead Code
const dataUrl = getDataUrl(event.currentTarget);
const dataUrl2 = getDataUrl(img.getAttribute('src'));
qrCode = dataUrl;
console.log(dataUrl);
console.log(qrCode);
console.log(dataUrl2);
//document.writeln(qrCode2);
//document.writeln(dataUrl2);
});
</script>
所以我认为将图像放入 canvas 的函数是错误的，空字符串导致 jsPDF 中的错误