javascript - 为什么我的 JSpdf npm 包在没有任何更新的情况下破坏了我的应用程序？

Question

我正在使用 vue.js和 jspdf生成 pdf .不更新 jspdf打包我的应用程序坏了。

我卸载了该软件包作为解决方法，但似乎无法弄清楚这个软件包破坏了应用程序的原因。

这是错误:

    Uncaught TypeError: this.thenCore is not a function
        at Promise.y.then (webpack-internal:///./node_modules/jspdf/dist/jspdf.min.js:123)
        at Promise.<anonymous> (adrum-latest.js:29)
        at Promise.catch (<anonymous>)
        at z (webpack-internal:///./node_modules/vue-analytics/dist/vue-analytics.js:1)
        at S (webpack-internal:///./node_modules/vue-analytics/dist/vue-analytics.js:1)
        at Function.Vue.use (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5102)
        at eval (webpack-internal:///./src/main.js:53)
        at Module../src/main.js (app.js:21185)
        at __webpack_require__ (app.js:767)
        at fn (app.js:130)

下面包含 jspdf 代码的 Vue 组件

    <template><!--download href="`${filePath}`"-->
        <a class="export-card" @click="downloadImage()">
            <span class="export-card-image"><font-awesome-icon :icon="[iconWeight, icon]"/></span>
            <span class="export-card-type">{{cardText}}</span>
        </a>
    </template>

    <script>
    import htmlToImage from 'html-to-image';
    import download from 'downloadjs';
    import printJS from 'print-js';
    import jsPDF from 'jspdf';
    import {mapActions,mapState} from 'vuex';

    export default {
        name: 'ExportCard',
        props: {
            icon: String,
            iconWeight: String,
            cardText: String,
            filePath: String,
        },
        computed: mapState({
            selectedMediaType: state => state.brandBuilderEditor.selectedMediaType,
            selectedImage: state => state.brandBuilderEditor.selectedImage,
            selectedDesign: state => state.brandBuilderEditor.selectedDesign,
            state: state => state,
        }),
        methods: {
            ...mapActions([
                'toggleLoader'
            ]),
            uploadFile(file) {
                const url = 'https://api.cloudinary.com/v1_1/uwm/upload';
                const xhr = new XMLHttpRequest();
                const fd = new FormData();
                xhr.open('POST', url, true);
                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

                // Reset the upload progress bar
                /*
                                document.getElementById('progress').style.width = 0;
                */

                // Update progress (can be used to show progress indicator)
                xhr.upload.addEventListener('progress', (e) => {
                    /*                  var progress = Math.round((e.loaded * 100.0) / e.total);
                                        document.getElementById('progress').style.width = progress + "%"; */

                    console.log(`fileuploadprogress data.loaded: ${e.loaded},
      data.total: ${e.total}`);
                });

                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        // File uploaded successfully
                        const response = JSON.parse(xhr.responseText);
                        console.log('response', response);
                        download(`https://res.cloudinary.com/uwm/video/upload/eo_10,o_50,l_${response.public_id.replace('/', ':')},so_0/v1566662844/videos/missworld.mp4`, 'my-video.mp4');
                    }
                };

                fd.append('upload_preset', 'jlw-test');
                fd.append('tags', 'browser_upload'); // Optional - add tag for image admin in Cloudinary
                fd.append('file', file);
                xhr.send(fd);
            },
            getFileName() {
                let mediaType = '';

                switch (this.selectedMediaType) {
                    case 1:
                        mediaType = 'flyer';
                        break;
                    case 2:
                        mediaType = 'social-banner';
                        break;
                    case 3:
                        mediaType = 'video';
                        break;
                    case 4:
                        mediaType = 'presentation';
                        break;
                    case 6:
                        mediaType = 'pricing';
                        break;
                    default:
                        mediaType = 'flyer';
                }

                return `my-${mediaType}`;
            },
            downloadImage() {
                // Only allow the loader and scaling of the template if the export type is not email.
                if(this.cardText !== 'Send to Contact') {
                    this.toggleLoader();
                    // This allows the Title card scale to be a scale of 1 instead of the viewport size.
                    document.getElementById('item-container').classList.add('fullscale');
                }

                // create the target item for the scale check
                const targetScale = document.getElementById('item-container');
                // Set the target check to an interval
                const interval = setInterval(scaleTemplateCheck, 250);

                let fileName = this.getFileName();
                const _this = this;

                function scaleTemplateCheck() {
                    // This gets the current scale of the title card.
                    const compStyle = window.getComputedStyle(targetScale);
                    const transformValue = compStyle.getPropertyValue('transform');

                    // If the interval does not produce the scale of 1 result redo the interval and once the scale of 1 is confirmed proceed to the htmlToImage checks
                    if(transformValue !== 'matrix(1, 0, 0, 1, 0, 0)') {
                        return;
                    }
                    clearInterval(interval);

                    // Checks the scale for the various export types
                    if (_this.cardText === '.PNG') {
                        htmlToImage.toPng(document.getElementById('item-container'), { backgroundColor: '#fff', quality: 1 })
                            .then((dataUrl) => {
                                download(dataUrl, `${fileName}.png`);
                                if (_this.selectedMediaType !== 2) {
                                    // This allows the Title card scale to be a scale of 1 instead of the viewport size.
                                    document.getElementById('item-container').classList.remove('fullscale');
                                }                        _this.toggleLoader();
                            });
                    } else if (_this.cardText === '.JPG') {
                        htmlToImage.toJpeg(document.getElementById('item-container'), { backgroundColor: '#fff', quality: 1 })
                            .then((dataUrl) => {
                                download(dataUrl, `${fileName}.jpg`);
                                if (_this.selectedMediaType !== 2) {
                                    document.getElementById('item-container').classList.remove('fullscale');
                                }                        _this.toggleLoader();
                            });
                    } else if (_this.cardText === '.mp4') {
                        htmlToImage.toPng(document.getElementById('item-container'), { backgroundColor: '#fff', quality: 1 })
                            .then((dataUrl) => {
                                _this.uploadFile(dataUrl);
                            });
                    } else if (_this.cardText === '.PDF') {
                        const filename = `${fileName}.pdf`;

                        htmlToImage.toJpeg(document.getElementById('item-container'), { backgroundColor: '#fff', quality: 1 })
                            .then((canvas) => {
                                // eslint-disable-next-line new-cap
                                const pdf = new jsPDF('p', 'mm', 'letter');
                                if (_this.selectedMediaType === 1 || _this.selectedMediaType === 6) {
                                    pdf.addImage(canvas, 'JPEG', 8, 8, 200, 258);
                                } else if ((_this.selectedMediaType === 2)) {
                                    pdf.addImage(canvas, 'JPEG', 8, 8, 200, 200);
                                }

                                pdf.save(filename);
                                if (_this.selectedMediaType !== 2) {
                                    document.getElementById('item-container').classList.remove('fullscale');
                                }
                                _this.toggleLoader();
                            });
                    } else if (_this.cardText === 'Print') {
                        htmlToImage.toJpeg(document.getElementById('item-container'), { backgroundColor: '#fff' })
                            .then((dataUrl) => {
                                console.log('dataUrl', dataUrl)
                                function VoucherSourcetoPrint(source) {
                                    return "<html><head><script>function step1(){\n" +
                                        "setTimeout('step2()', 10);}\n" +
                                        "function step2(){window.print();window.close()}\n" +
                                        "</scri" + "pt></head><body onload='step1()'>\n" +
                                        "<img src='" + source + "'  style='max-width:100%'/></body></html>";
                                }
                                const Pagelink = "about:blank";
                                const pwa = window.open(Pagelink, "_new");
                                pwa.document.open();
                                pwa.document.write(VoucherSourcetoPrint(dataUrl));
                                pwa.document.close();

                                if (_this.selectedMediaType !== 2) {
                                    document.getElementById('item-container').classList.remove('fullscale');
                                }  
                                _this.toggleLoader();

                            });
                    } else if (_this.cardText === 'Download') {
                        window.open(_this.selectedDesign.item.medias[0].uri);
                    }

                }// end of if statement
            },
        },
    };
    </script>

    <style lang="scss" scoped>
        .export-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: $off-white;
            border-radius: $b360-border-radius-base;
            border: $b360-border-width-thin $border-color-light solid;
            @include rem('padding', 19px 0px 18px);
            text-decoration: none;
            box-shadow: none;
            transition: $b360-motion-selection;
            cursor: pointer;

            &:hover {
                border-color: $b360-color--gray__medium;
                box-shadow: 0 0 6px $shadow-color;
            }
        }

        .export-card-image {
            @include rem('font-size', 30px);
            color: $brand-teal;
            line-height: 0;
        }

        .export-card-type {
            font-size: $b360-font-size--base;
            line-height: 1;
            @include rem('margin-top', 15px);
            color: $text-base-color;
        }
    </style>

Answer 1

我认为您收到错误是因为您在应用程序中检测了 appdynamic。您可以注释掉 appdynamics 配置，您的应用程序应该会运行。我注意到 appdynamics 在库中做深度监控，所以它会挑选所有愚蠢的方法和实现函数。