dompdf.js 1.0.0

package/package.json

@@ -0,0 +1,134 @@
+{
+  "title": "dompdf.js",
+  "name": "dompdf.js",
+  "description": "HTML to PDF",
+  "main": "dist/dompdf.js",
+  "module": "dist/dompdf.esm.js",
+  "typings": "dist/types/index.d.ts",
+  "browser": "dist/dompdf.js",
+  "version": "1.0.0",
+  "author": {
+    "name": "lfc",
+    "email": "lfc191910@gmail.com",
+    "url": "https://hertzen.com"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:lmn1919/dompdf.js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/lmn1919/dompdf.js/issues"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.4.3",
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-flow": "^7.0.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-typescript": "^8.2.1",
+    "@types/chai": "^4.1.7",
+    "@types/express": "^4.17.13",
+    "@types/glob": "^7.1.1",
+    "@types/jest": "^26.0.24",
+    "@types/jest-image-snapshot": "^4.3.1",
+    "@types/karma": "^6.3.0",
+    "@types/mocha": "^8.2.3",
+    "@types/node": "^16.3.1",
+    "@types/platform": "^1.3.4",
+    "@types/promise-polyfill": "^6.0.3",
+    "@typescript-eslint/eslint-plugin": "^4.28.2",
+    "@typescript-eslint/parser": "^4.28.2",
+    "@webpack-cli/serve": "^2.0.1",
+    "appium-ios-simulator": "^3.10.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-add-module-exports": "^1.0.2",
+    "babel-plugin-dev-expression": "^0.2.1",
+    "base64-arraybuffer": "1.0.1",
+    "body-parser": "^1.19.0",
+    "chai": "4.1.1",
+    "chromeless": "^1.5.2",
+    "cors": "^2.8.5",
+    "es6-promise": "^4.2.8",
+    "eslint": "^7.30.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "3.4.0",
+    "express": "^4.17.1",
+    "filenamify-url": "1.0.0",
+    "glob": "7.1.3",
+    "html2canvas-proxy": "1.0.1",
+    "jest": "^27.0.6",
+    "jest-image-snapshot": "^4.5.1",
+    "jquery": "^3.5.1",
+    "js-polyfills": "^0.1.42",
+    "karma": "^6.3.2",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-edge-launcher": "^0.4.2",
+    "karma-firefox-launcher": "^2.1.0",
+    "karma-ie-launcher": "^1.0.0",
+    "karma-junit-reporter": "^2.0.1",
+    "karma-mocha": "^2.0.1",
+    "karma-safarinative-launcher": "^1.1.0",
+    "karma-sauce-launcher": "^2.0.2",
+    "mkdirp": "^3.0.1",
+    "mocha": "^9.0.2",
+    "node-simctl": "^5.3.0",
+    "platform": "^1.3.6",
+    "prettier": "^2.3.2",
+    "replace-in-file": "^3.0.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.53.1",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-serve": "^2.0.2",
+    "rollup-plugin-sourcemaps": "^0.6.3",
+    "serve-index": "^1.9.1",
+    "slash": "1.0.0",
+    "standard-version": "^8.0.2",
+    "ts-jest": "^27.0.3",
+    "ts-loader": "^8.3.0",
+    "ts-node": "^10.1.0",
+    "tslib": "^2.3.0",
+    "typescript": "^4.3.5",
+    "uglify-js": "^3.13.10",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
+    "yargs": "^17.0.1"
+  },
+  "scripts": {
+    "prebuild": "rimraf dist/ && rimraf build/ && mkdirp dist && mkdirp build",
+    "build": "tsc --module commonjs && rollup -c rollup.config.ts && npm run build:create-reftest-list && npm run build:testrunner && npm run build:minify",
+    "build:testrunner": "rollup -c tests/rollup.config.ts",
+    "build:minify": "uglifyjs --compress --comments /^!/ -o dist/html2canvas.min.js --mangle -- dist/html2canvas.js",
+    "build:reftest-result-list": "ts-node scripts/create-reftest-result-list.ts",
+    "build:create-reftest-list": "ts-node scripts/create-reftest-list.ts tests/reftests/ignore.txt build/reftests.ts",
+    "build:reftest-preview": "webpack --config www/webpack.config.js",
+    "release": "standard-version",
+    "format": "prettier --write \"{src,www/src,tests,scripts}/**/*.ts\"",
+    "lint": "eslint src/**/*.ts --max-warnings 0",
+    "test": "npm run lint && npm run unittest && npm run karma",
+    "unittest": "jest",
+    "reftests-diff": "mkdirp tmp/snapshots && jest --roots=tests --testMatch=**/reftest-diff.ts",
+    "karma": "ts-node tests/karma",
+    "watch": "npx rollup -c rollup.config.ts -w",
+    "watch:unittest": "mocha --require ts-node/register --watch-extensions ts -w src/**/__tests__/*.ts",
+    "start": "ts-node tests/server --port=8080 --cors=8081",
+    "dev": "webpack serve --config webpack.dev.js --open"
+  },
+  "homepage": "https://html2canvas.hertzen.com",
+  "license": "MIT",
+  "dependencies": {
+    "@zumer/snapdom": "^1.8.0",
+    "css-line-break": "^2.1.0",
+    "fontkit": "^2.0.4",
+    "jspdf": "^2.5.2",
+    "svg2pdf.js": "^2.5.0",
+    "text-segmentation": "^1.0.3"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "strictNullChecks": true,
+        "strictPropertyInitialization": true,
+        "types": ["node", "jest"],
+        "target": "es5",
+        "lib": ["es2015", "dom"],
+        "sourceMap": true,
+        "outDir": "dist/lib",
+        "declaration": true,
+        "declarationDir": "dist/types",
+        "resolveJsonModule": true,
+        "moduleResolution": "node"
+    },
+    "include": [
+        "src"
+    ],
+   
+}

package/userscript.js

@@ -0,0 +1,372 @@
+// ==UserScript==
+// @name         HTML2PDF 网页元素转PDF
+// @namespace    http://tampermonkey.net/
+// @version      1.0
+// @description  在任意网站添加按钮，选择页面元素并生成PDF
+// @author       You
+// @match        *://*/*
+// @grant        none
+// @require      file:///D:/project-code/html2pdf/dist/html2pdf.js
+// @require      file:///D:/project-code/html2pdf/examples/SourceHanSansSC-Normal-Min-normal.js
+// ==/UserScript==
+
+(function () {
+    'use strict';
+
+    // 全局变量
+    let isSelecting = false;
+    let selectedElement = null;
+    let overlay = null;
+    let controlPanel = null;
+
+    // 创建控制面板
+    function createControlPanel() {
+        const panel = document.createElement('div');
+        panel.id = 'html2pdf-control-panel';
+        panel.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 10000;
+            background: #fff;
+            border: 2px solid #007cba;
+            border-radius: 8px;
+            padding: 15px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            font-family: Arial, sans-serif;
+            min-width: 200px;
+        `;
+
+        panel.innerHTML = `
+            <div style="margin-bottom: 10px; font-weight: bold; color: #333;">HTML2PDF 工具</div>
+            <button id="select-element-btn" style="
+                width: 100%;
+                padding: 8px 12px;
+                margin-bottom: 8px;
+                background: #007cba;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 14px;
+            ">选择元素</button>
+            <button id="generate-pdf-btn" style="
+                width: 100%;
+                padding: 8px 12px;
+                margin-bottom: 8px;
+                background: #28a745;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 14px;
+                opacity: 0.5;
+                margin-left:0
+            " disabled>生成PDF</button>
+            <button id="close-panel-btn" style="
+                width: 100%;
+                padding: 6px 12px;
+                background: #dc3545;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 12px;
+                margin - left: 0
+            ">关闭</button>
+            <div id="selected-info" style="
+                margin-top: 10px;
+                padding: 8px;
+                background: #f8f9fa;
+                border-radius: 4px;
+                font-size: 12px;
+                color: #666;
+                display: none;
+            "></div>
+        `;
+
+        document.body.appendChild(panel);
+        return panel;
+    }
+
+    // 创建选择覆盖层
+    function createOverlay() {
+        const overlay = document.createElement('div');
+        overlay.id = 'html2pdf-overlay';
+        overlay.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 123, 186, 0.1);
+            z-index: 9999;
+            cursor: crosshair;
+            pointer-events: none;
+        `;
+        document.body.appendChild(overlay);
+        return overlay;
+    }
+
+    // 高亮元素
+    function highlightElement(element) {
+        // 移除之前的高亮
+        const prevHighlight = document.querySelector('.html2pdf-highlight');
+        if (prevHighlight) {
+            prevHighlight.classList.remove('html2pdf-highlight');
+        }
+
+        // 添加高亮样式
+        if (element && element !== document.body) {
+            element.classList.add('html2pdf-highlight');
+
+            // 添加高亮CSS
+            if (!document.querySelector('#html2pdf-highlight-style')) {
+                const style = document.createElement('style');
+                style.id = 'html2pdf-highlight-style';
+                style.textContent = `
+                    .html2pdf-highlight {
+                        outline: 3px solid #007cba !important;
+                        outline-offset: 2px !important;
+
+                    }
+                `;
+                document.head.appendChild(style);
+            }
+        }
+    }
+
+    // 开始选择模式
+    function startSelection() {
+        isSelecting = true;
+        overlay = createOverlay();
+        document.body.style.cursor = 'crosshair';
+
+        // 更新按钮状态
+        const selectBtn = document.getElementById('select-element-btn');
+        selectBtn.textContent = '取消选择';
+        selectBtn.style.background = '#dc3545';
+
+        // 添加事件监听
+        document.addEventListener('mouseover', onMouseOver);
+        document.addEventListener('click', onElementClick);
+        document.addEventListener('keydown', onKeyDown);
+    }
+
+    // 停止选择模式
+    function stopSelection() {
+        isSelecting = false;
+        document.body.style.cursor = '';
+
+        if (overlay) {
+            overlay.remove();
+            overlay = null;
+        }
+
+        // 更新按钮状态
+        const selectBtn = document.getElementById('select-element-btn');
+        selectBtn.textContent = '选择元素';
+        selectBtn.style.background = '#007cba';
+
+        // 移除事件监听
+        document.removeEventListener('mouseover', onMouseOver);
+        document.removeEventListener('click', onElementClick);
+        document.removeEventListener('keydown', onKeyDown);
+    }
+
+    // 鼠标悬停事件
+    function onMouseOver(e) {
+        if (!isSelecting) return;
+        e.preventDefault();
+
+        const element = e.target;
+        if (element !== controlPanel && !controlPanel.contains(element)) {
+            highlightElement(element);
+        }
+    }
+
+    // 元素点击事件
+    function onElementClick(e) {
+        if (!isSelecting) return;
+        e.preventDefault();
+        e.stopPropagation();
+
+        const element = e.target;
+        if (element !== controlPanel && !controlPanel.contains(element)) {
+            selectedElement = element;
+            stopSelection();
+            updateSelectedInfo(element);
+            enablePdfGeneration();
+        }
+    }
+
+    // 键盘事件（ESC取消选择）
+    function onKeyDown(e) {
+        if (e.key === 'Escape' && isSelecting) {
+            stopSelection();
+        }
+    }
+
+    // 更新选中元素信息
+    function updateSelectedInfo(element) {
+        const info = document.getElementById('selected-info');
+        const tagName = element.tagName.toLowerCase();
+        const className = element.className ? `.${element.className.split(' ').join('.')}` : '';
+        const id = element.id ? `#${element.id}` : '';
+
+        info.innerHTML = `
+            <strong>已选择元素:</strong><br>
+            标签: ${tagName}${id}${className}<br>
+            尺寸: ${element.offsetWidth} × ${element.offsetHeight}px
+        `;
+        info.style.display = 'block';
+    }
+
+    // 启用PDF生成按钮
+    function enablePdfGeneration() {
+        const pdfBtn = document.getElementById('generate-pdf-btn');
+        pdfBtn.disabled = false;
+        pdfBtn.style.opacity = '1';
+    }
+
+    // 生成PDF
+    async function generatePDF() {
+        if (!selectedElement) {
+            alert('请先选择要转换的元素');
+            return;
+        }
+
+        try {
+            // 显示加载状态
+            const pdfBtn = document.getElementById('generate-pdf-btn');
+            const originalText = pdfBtn.textContent;
+            pdfBtn.textContent = '生成中...';
+            pdfBtn.disabled = true;
+
+            // 使用html2canvas截图
+            html2pdf(selectedElement, {
+                useCORS: true,
+                scale: 1,
+                fontConfig: {
+                    fontFamily: 'SourceHanSansCN-Medium',
+                    fontBase64: window.fontBase64, //
+                    fontUrl: '',
+                    fontWeight: 400,
+                    fontStyle: 'normal'
+                },
+            }).then(function (canvas) {
+                const link = document.createElement('a');
+                link.download = 'output.png';
+                link.href = canvas.toDataURL('image/png');
+                link.click();
+                // 恢复按钮状态
+                pdfBtn.textContent = originalText;
+                pdfBtn.disabled = false;
+
+                alert('PDF生成成功！');
+            }).catch(function (err) {
+                console.log('creacterr', err);
+
+            });;
+
+
+
+
+
+        } catch (error) {
+            console.error('PDF生成失败:', error);
+            alert('PDF生成失败，请检查控制台错误信息');
+
+            // 恢复按钮状态
+            const pdfBtn = document.getElementById('generate-pdf-btn');
+            pdfBtn.textContent = '生成PDF';
+            pdfBtn.disabled = false;
+        }
+    }
+
+    // 关闭面板
+    function closePanel() {
+        if (isSelecting) {
+            stopSelection();
+        }
+
+        // 移除高亮
+        const highlight = document.querySelector('.html2pdf-highlight');
+        if (highlight) {
+            highlight.classList.remove('html2pdf-highlight');
+        }
+
+        // 移除样式
+        const style = document.querySelector('#html2pdf-highlight-style');
+        if (style) {
+            style.remove();
+        }
+
+        // 移除面板
+        if (controlPanel) {
+            controlPanel.remove();
+            controlPanel = null;
+        }
+
+        selectedElement = null;
+    }
+
+    // 初始化
+    function init() {
+        // 等待页面加载完成
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', init);
+            return;
+        }
+
+        // 创建控制面板
+        controlPanel = createControlPanel();
+
+        // 绑定事件
+        document.getElementById('select-element-btn').addEventListener('click', () => {
+            if (isSelecting) {
+                stopSelection();
+            } else {
+                startSelection();
+            }
+        });
+
+        document.getElementById('generate-pdf-btn').addEventListener('click', generatePDF);
+        document.getElementById('close-panel-btn').addEventListener('click', closePanel);
+
+        // 让面板可拖拽
+        let isDragging = false;
+        let dragOffset = {
+            x: 0,
+            y: 0
+        };
+
+        controlPanel.addEventListener('mousedown', (e) => {
+            if (e.target.tagName !== 'BUTTON') {
+                isDragging = true;
+                dragOffset.x = e.clientX - controlPanel.offsetLeft;
+                dragOffset.y = e.clientY - controlPanel.offsetTop;
+                controlPanel.style.cursor = 'move';
+            }
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (isDragging) {
+                controlPanel.style.left = (e.clientX - dragOffset.x) + 'px';
+                controlPanel.style.top = (e.clientY - dragOffset.y) + 'px';
+                controlPanel.style.right = 'auto';
+            }
+        });
+
+        document.addEventListener('mouseup', () => {
+            isDragging = false;
+            controlPanel.style.cursor = '';
+        });
+
+        console.log('HTML2PDF 用户脚本已加载');
+    }
+
+    // 启动脚本
+    init();
+
+})();

package/webpack.base.js

@@ -0,0 +1,31 @@
+const path = require('path');
+
+const rootDir = process.cwd();
+
+module.exports = {
+  entry: path.resolve(rootDir, 'src/index.ts'),
+  output: {
+    path: path.resolve(rootDir, 'dist'),
+    filename: 'bundle.[contenthash:8].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(jsx|js)$/,
+        use: 'babel-loader',
+        include: path.resolve(rootDir, 'src'),
+        exclude: /node_modules/,
+      },
+      { test: /\.tsx?$/, use: ["ts-loader"], exclude: /node_modules/ }
+    ]
+  },
+  plugins: [
+    // new HtmlWebpackPlugin({
+    //   template: path.resolve(rootDir, 'public/test.ejs'),
+    //   inject: 'body',
+    //   scriptLoading: 'blocking',
+    // }),
+    // new CleanWebpackPlugin(),
+    // new ClassToStyleWebpackPlugin({outFileName:"buildInfo"})
+  ],
+}

package/webpack.dev.js

@@ -0,0 +1,21 @@
+const { merge } = require('webpack-merge');
+const baseConfig = require('./webpack.base');
+
+module.exports = merge(baseConfig, {
+  mode: 'development',
+  devtool: 'eval-cheap-module-source-map',
+  devServer: {
+    port: '4000', // 默认是 8080
+    hot: true,
+    // stats: 'errors-only', // 终端仅打印 error
+    compress: true, // 是否启用 gzip 压缩
+    proxy: {
+      '/api': {
+        target: 'http://0.0.0.0:80',
+        pathRewrite: {
+          '/api': '',
+        },
+      },
+    },
+  },
+});