我正在使用 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>
最佳答案
我认为您收到错误是因为您在应用程序中检测了 appdynamic。您可以注释掉 appdynamics 配置，您的应用程序应该会运行。我注意到 appdynamics 在库中做深度监控，所以它会挑选所有愚蠢的方法和实现函数。
关于javascript - 为什么我的 JSpdf npm 包在没有任何更新的情况下破坏了我的应用程序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59361249/