Great question—this is a super common scenario when working with frontend libraries on WordPress without a build tool. Let’s clear up your concerns and walk through a solid, reliable approach:

Is the jsDelivr CDN approach reliable? #

Absolutely. jsDelivr is a widely trusted open-source CDN used by millions of projects to host npm packages, including html2canvas. It offers global fast delivery, strict integrity checks, and pulls directly from official package sources—so you don’t have to worry about uptime or tampered files. This is a totally valid way to load the library without Node.js.

Does the index.js from jsDelivr include full html2canvas functionality? #

Yes, it does. The dist/npm/index.js file in the html2canvas npm package is the compiled, production-ready full version of the library. It contains every core feature you’d get from installing via npm or downloading the package manually—things like rendering complex HTML elements, handling modern CSS, and generating canvas objects for jsPDF. No functionality is stripped out for the CDN-hosted version.

Recommended Implementation for WordPress #

To avoid conflicts and ensure smooth loading, here’s how to set this up properly:

Option 1: Enqueue scripts via WordPress functions (best practice) #

Add this to your theme’s functions.php file (or a custom plugin) to load scripts the WordPress way:

function enqueue_html2canvas_jspdf() {
    // Load html2canvas first (jsPDF depends on its output)
    wp_enqueue_script( 
        'html2canvas', 
        'https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-alpha.12/dist/npm/index.js', 
        array(), 
        '1.0.0-alpha.12', 
        true 
    );
    // Load jsPDF (use the CDN version of your choice)
    wp_enqueue_script( 
        'jspdf', 
        'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js', 
        array(), 
        '2.5.1', 
        true 
    );
}
add_action( 'wp_enqueue_scripts', 'enqueue_html2canvas_jspdf' );

The true parameter loads scripts in the footer, which improves performance and avoids DOM-ready issues.

Option 2: Direct script tags for specific pages #

If you only need these scripts on one page/post, add these tags in the HTML editor (use "Text" mode in the classic editor, or a Custom HTML block in Gutenberg):

<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-alpha.12/dist/npm/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

Troubleshooting Tips #

If you run into issues after setup:

• Check your browser’s developer console (F12) for errors. Common culprits include:
  • Failed script loads (verify the CDN links are accessible)
  • Conflicts with other WordPress scripts (e.g., jQuery in no-conflict mode)
  • Unrenderable HTML elements (some complex CSS or third-party widgets might cause glitches)
• Try a more recent alpha/beta version of html2canvas if you hit rendering bugs—jsDelivr hosts all tagged versions, so just adjust the version number in the URL.

内容的提问来源于stack exchange，提问作者MROVIC