pdf 출력시 textarea 글자 잘림 채택완료
'PDF다운로드' 버튼을 누르고 다운 받은 pdf파일을 열어 봤는데 textarea 태그 안에 있는 글자들은 다 잘리네요ㅜㅜㅜㅜ 어떻게 하면 좋을까요?
멘토링 결과 보고서
import MatchDateService from "@/services/main/UserMatch";
import jwtDecode from "jwt-decode";
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
export default {
name: "JournalCheck",
data() {
return {
// input data
mentorName: "",
mentorArea: "",
mentorGroup: "",
mentorRank: "",
menteeName: "",
menteeIsStartUp: "",
menteeCompany: "",
menteeItem: "",
performanceDate: "",
degree: "",
teachingMethod: 1,
place: "",
etc: "",
subject: "",
summary: "",
result: "",
benefit: "",
pathUrl01: "",
pathUrl02: "",
appId: 0,
buildId2: 0,
hanFile: '',
hanFile2: '',
hanFileDownloadPath: ''
}
},
methods: {
async captureAndConvertToPDF() {
const captureTarget = document.getElementById('pdfarea');
try {
const canvas = await html2canvas(captureTarget, {
useCORS: true,
scale: 1,
});
const imageData = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'mm', 'a4');
pdf.addImage(imageData, 'PNG', 0, 0, 210, 297);
pdf.save('download.pdf');
} catch (error) {
console.error('Error capturing or converting to PDF:', error);
}
},
// async downloadFile(fileName) {
// const response = await fetch(this.hanFileDownloadPath);
// const fileContent = await response.blob();
// const url = window.URL.createObjectURL(fileContent);
// const link = document.createElement('a');
// link.href = url;
// link.setAttribute('download', fileName);
// document.body.appendChild(link);
// link.click();
// },
selectFile() {
if (this.$refs.fileInput) {
this.$refs.fileInput.click();
}
},
handleFileChange(event) {
this.hanFile = event.target.files[0];
},
backSite() {
this.$router.go(-1);
},
getUser() {
const tokenData = localStorage.getItem("user");
const parsedToken = JSON.parse(tokenData);
const accessToken = parsedToken.accessToken;
const decodedToken = jwtDecode(accessToken);
return decodedToken;
},
async saveJournal() {
if (confirm("저장하시겠습니까?")) {
if (!this.menteeIsStartUp) {
alert('창업여부를 선택해 주세요.');
}
else {
try {
const formData = new FormData();
formData.append("images", this.$refs.fileInput01.files[0]);
formData.append("images", this.$refs.fileInput02.files[0]);
formData.append("textFile", this.hanFile);
formData.append("appId", this.$route.params.appId);
if (this.buildId) {
formData.append("buildId", this.$route.params.buildId);
}
formData.append("mentorName", this.mentorName);
formData.append("mentorArea", this.mentorArea);
formData.append("mentorGroup", this.mentorGroup);
formData.append("mentorRank", this.mentorRank);
formData.append("menteeName", this.menteeName);
formData.append("menteeIsStartUp", this.menteeIsStartUp);
formData.append("menteeCompany", this.menteeCompany);
if (this.menteeItem) {
formData.append("menteeItem", this.menteeItem);
}
formData.append("degree", this.degree);
formData.append("performanceDate", new Date(this.performanceDate));
formData.append("teachingMethod", this.teachingMethod);
formData.append("place", this.place);
formData.append("etc", this.etc);
formData.append("subject", this.subject);
formData.append("summary", this.summary);
formData.append("result", this.result);
formData.append("benefit", this.benefit);
for (let key of formData.keys()) {
console.log(key + "," + formData.get(key));
}
await MatchDateService.createConsultingJournal(this.getUser().id, formData);
alert("저장되었습니다.");
} catch (e) {
alert("저장에 실패하였습니다.");
console.log("저장실패", e);
}
}
}
},
async getJournalData(id) {
try {
const response = await MatchDateService.getConsultingJournalDetail(id);
this.mentorName = response.data.mentorName;
this.mentorArea = response.data.mentorArea;
this.mentorGroup = response.data.mentorGroup;
this.mentorRank = response.data.mentorRank;
this.menteeName = response.data.menteeName;
this.menteeIsStartUp = response.data.menteeIsStartUp;
this.menteeCompany = response.data.menteeCompany;
this.menteeItem = response.data.menteeItem;
this.performanceDate = new Date(response.data.performanceDate).toISOString().split('T')[0];
this.degree = response.data.degree;
this.teachingMethod = response.data.teachingMethod;
this.place = response.data.place;
this.etc = response.data.etc;
this.subject = response.data.subject;
this.summary = response.data.summary;
this.result = response.data.result;
this.benefit = response.data.benefit;
this.appId = response.data.appId;
this.buildId2 = response.data.buildId;
this.pathUrl01 = response.data.img1;
this.pathUrl02 = response.data.img2;
this.hanFile2 = decodeURIComponent(response.data.hanFileName);
this.hanFileDownloadPath = response.data.hanFile;
console.log("조회 성공", response.data);
} catch (e) {
console.log("조회 실패", e.response.data.message);
}
},
async updateJournalData() {
if (confirm("수정하시겠습니까?")) {
try {
const formData = new FormData();
formData.append("images", this.$refs.fileInput01.files[0]);
formData.append("images", this.$refs.fileInput02.files[0]);
formData.append("textFile", this.hanFile);
formData.append("appId", this.appId);
if (this.buildId2) {
formData.append("buildId", this.buildId2);
}
formData.append("mentorName", this.mentorName);
formData.append("mentorArea", this.mentorArea);
formData.append("mentorGroup", this.mentorGroup);
formData.append("mentorRank", this.mentorRank);
formData.append("menteeName", this.menteeName);
formData.append("menteeIsStartUp", this.menteeIsStartUp);
formData.append("menteeCompany", this.menteeCompany);
if (this.menteeItem) {
formData.append("menteeItem", this.menteeItem);
}
formData.append("degree", this.degree);
formData.append("performanceDate", this.performanceDate);
formData.append("teachingMethod", this.teachingMethod);
formData.append("place", this.place);
formData.append("etc", this.etc);
formData.append("subject", this.subject);
formData.append("summary", this.summary);
formData.append("result", this.result);
formData.append("benefit", this.benefit);
for (const x of formData.entries()) {
console.log(x);
}
await MatchDateService.updateConsultingJournal(this.$route.params.id, formData);
alert('수정되었습니다.');
await this.getJournalData(this.$route.params.id);
} catch (e) {
console.log("업데이트 실패", e);
}
}
},
async getMenteeMento() {
try {
const res = await MatchDateService.getConsultGeneralInfo(this.paramAppId);
this.mentorName = res.data.consultantUser.name;
this.mentorArea = res.data.category;
this.mentorGroup = res.data.consultantUser.company;
this.mentorRank = res.data.mentorRank;
this.menteeName = res.data.generalUser.name;
this.menteeCompany = res.data.generalUser.company;
this.menteeItem = res.data.build.title;
}
catch (e) {
console.log(e.response.data.message)
}
},
async handleFileUpload(event, target) {
const file = event.target.files[0];
if (file && file.type.startsWith("image/")) {
const reader = new FileReader();
reader.onload = () => {
this['pathUrl' + target] = reader.result;
};
reader.readAsDataURL(file);
}
},
async loadMentoInfo(appId) {
try {
let data = {
appId: +appId
};
const response = await MatchDateService.loadMentoInfo(data);
console.log("멘토 정보 조회 성공", response.data);
this.mentorName = response.data[0].name;
this.mentorArea = this.$route.params.tagName;
this.mentorGroup = response.data[0].company;
} catch (e) {
console.log("멘토 정보 조회 실패", e.response.data.message);
}
},
async loadMenteeInfo(appId) {
try {
let data = {
appId: +appId
};
const response = await MatchDateService.loadMenteeInfo(data);
console.log("멘티 정보 조회 성공", response);
this.menteeName = response.data[0].name;
this.menteeCompany = response.data[0].company;
this.menteeItem = this.$route.params.bmTitle;
} catch (e) {
console.log("멘티 정보 조회 실패", e.response.data.message);
}
},
},
async mounted() {
if (this.$route.params.id == 0) {
// 신규작성일때 멘토, 멘티 정보가져오기
// 멘토정보 가져오기
await this.loadMentoInfo(this.$route.params.appId);
// 멘티정보 가져오기
await this.loadMenteeInfo(this.$route.params.appId);
} else {
// 수정일때 데이터 불러오기
await this.getJournalData(this.$route.params.id);
}
// 멘티, 멘토정보 가져오기
//await this.getMenteeMento();
}
};
답변 1개
페이지를 pdf 화 할때 생각보다 CSS 제한이 많습니다.
원문 CSS 를 수정하세요.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인