时间戳

首页 > 解决方案 > Wordpress 无法识别 JS 库

javascript - Wordpress 无法识别 JS 库

问题描述

我目前遇到无法在 wordpress 中导入 JS 库的问题。它是jsPDF库，在 wordpress 中，当我按下按钮时它会抛出此错误消息。ReferenceError: Can't find variable: jsPDF 我在functions.php中添加了这一行，也在本地尝试过。

    wp_enqueue_script( 'jsPDF', get_stylesheet_directory_uri() . 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.0/jspdf.es.js', array( 'jquery' ),'',true );

    wp_enqueue_script( 'jsPDF', get_stylesheet_directory_uri() . '/scripts/jsPDF.js', array( 'jquery' ),'',true );

我使用的所有其他自定义脚本都在工作。这是使用 jsPDF 的脚本。脚本已加载，我可以通过函数之前的 console.log 来判断。

console.log("generate PDF loaded");

function testPDF(){
    console.log("testPDF-function works")
    var doc = new jsPDF('p', 'pt', 'a4');

    doc.fromHTML($('#a4').get(0), 20,20, {
        'width':500
    });

    doc.save('Test.pdf');
}

标签： javascriptwordpressjspdf

解决方案

将脚本排入队列的方式存在两个问题。

  1. 脚本的名称应该是唯一的。
  2. 可能是您的错误消息的原因：您将 cdn 定位在插件文件夹中，这不是文件所在的位置。

所以你的代码应该是这样的：

wp_enqueue_script( 'jsPDF', 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.0/jspdf.es.js', array( 'jquery' ),'',true );

wp_enqueue_script( 'myJsPDF', get_stylesheet_directory_uri() . '/scripts/jsPDF.js', array( 'jquery' ),'',true );

在您的第一个 wp_enqueue_script 中，您拥有get_stylesheet_directory_uri()，因此它正在您的主题文件夹中寻找一个文件。但它只需要是 CDN 的 URL。

在第二个 wp_enqueue_script 你给它一个唯一的名字，所以不会有冲突。也许再看看https://developer.wordpress.org/reference/functions/wp_enqueue_script/

推荐阅读