|
|
客户端当前正在保存pdf文件。但是,我想让它保存在服务器文件夹中,然后在保存后预览。
谢谢。
这是我的代码:
import React, { Component, PropTypes } from 'react';
import './App.css';
import FirstPage from './mainPage.jpg';
import SecondPage from './secondPage.jpg';
import OtherPage from './otherPage.jpg';
import Placeholder from './placeholder.jpg';
var pdfConverter = require('jspdf');
const image2base64 = require('image-to-base64');
class App extends Component {
constructor(props) {
super(props);
this.state = {
Name:"Jimmy Kaler",
firstPage:'',
secondPage:'',
otherPage:'',
placeholder:''
}
};
firstPage = () =>{
image2base64(FirstPage)
.then(
(response) => {
this.setState({firstPage:response});
}
);
}
secondPage = () =>{
image2base64(SecondPage)
.then(
(response) => {
this.setState({secondPage:response});
}
);
}
otherPage = () => {
image2base64(OtherPage)
.then(
(response) => {
this.setState({otherPage:response})
}
)
}
placeholderImage = () => {
image2base64(Placeholder)
.then(
(response) => {
this.setState({placeholder:response})
}
)
}
componentWillMount(){
this.firstPage();
this.secondPage();
this.otherPage();
this.placeholderImage();
}
printDocument = () => {
const {firstPage,secondPage,otherPage,placeholder} = this.state;
const doc = new pdfConverter('p','pt','a4');
var fPage = 'data:image/jpeg;base64,'+firstPage;
var sPage = 'data:image/jpeg;base64,'+secondPage;
var oPage = 'data:image/jpeg;base64,'+otherPage;
var pImage = 'data:image/jpeg;base64,'+placeholder;
doc.setFontSize(14);
doc.setTextColor(40);
doc.setFontStyle('normal');
doc.addImage(fPage, 'JPEG', 5, 0, 590, 842);
doc.addImage(pImage, 'JPEG', 60, 90, 210, 130);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(40, 240, 'Production Name:');
doc.setFontSize(12);
doc.setFont("arial");
doc.setFontType("normal");
var pDescription = "Here will be our production Name.";
var splitDesc = doc.splitTextToSize(pDescription, 260);
doc.text(40, 260, splitDesc);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(40, 370, 'Deadline: 10/11/2017');
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(40, 400, 'Category: My Category');
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(40, 430, 'Total Duration: 5:00');
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(40, 460, 'Objective:');
doc.setFontSize(12);
doc.setFont("arial");
doc.setFontType("normal");
var oDescription = "Here will be our Objective description. Here will be our Objective description.";
var splitObj = doc.splitTextToSize(oDescription, 260);
doc.text(40, 480, splitObj);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(40, 530, 'Target Audience:');
doc.setFontSize(12);
doc.setFont("arial");
doc.setFontType("normal");
var tDescription = "Here will be our production description. Here will be our production description.";
var splitTarg = doc.splitTextToSize(tDescription, 260);
doc.text(40, 550, splitTarg);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(40, 600, 'Contributors:');
doc.setFontSize(12);
doc.setFont("arial");
doc.setFontType("normal");
var cDescription = "Here will be our production description. Here will be our production description.";
var splitCont = doc.splitTextToSize(cDescription, 260);
doc.text(40, 620, splitCont);
doc.setFontSize(10);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(40, 680, 'Production Pin: EPIN001');
doc.setFontSize(10);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(40, 700, 'Storyboard Printed On: 10/12/2018');
doc.setFontSize(10);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(40, 720, 'By: GSV');
//////////// Seconnd Page////////////
doc.addPage('a4','p');
doc.addImage(sPage, 'JPEG', 0, 0, 595, 842);
doc.setFontSize(20);
doc.setFont("arial");
doc.setFontType("bold");
doc.text(250, 80, 'Storyboard');
doc.addImage(pImage, 'JPEG', 70, 310, 256, 150);
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("bold");
doc.text(70, 265, '1. Intro');
doc.setFontType("normal");
doc.text(270, 265, '5 sec');
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(70, 285, 'Title of Scene');
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(340, 120, 'Description');
doc.setFontSize(12);
doc.setFont("arial");
doc.setFontType("normal");
var desc1 = "Here will be our production Name.Here will be our production Name.Here will be our production Name.";
var splitDesc1 = doc.splitTextToSize(desc1, 220);
doc.text(340, 140, splitDesc1);
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("bold");
doc.text(70, 480, '2. Title Card');
doc.setFontType("normal");
doc.text(270, 480, 'Duration');
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(70, 500, 'Title of Scene');
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(340, 320, 'Description');
doc.setFontSize(12);
doc.setFont("arial");
doc.setFontType("normal");
var desc2 = "Here will be our production Name.Here will be our production Name.Here will be our production Name.";
var splitDesc2 = doc.splitTextToSize(desc2, 220);
doc.text(340, 340, splitDesc2);
doc.addImage(pImage, 'JPEG', 70, 530, 256, 150);
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("bold");
doc.text(70, 700, '3. Full Video');
doc.setFontType("normal");
doc.text(270, 700, 'Duration');
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(70, 720, 'Title of Scene');
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(340, 540, 'Description');
doc.setFontSize(12);
doc.setFont("arial");
doc.setFontType("normal");
var desc3 = "Here will be our production Name.Here will be our production Name.Here will be our production Name.";
var splitDesc3 = doc.splitTextToSize(desc3, 220);
doc.text(340, 560, splitDesc3);
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(340, 640, 'Teleprometer');
doc.setFontSize(12);
doc.setFont("arial");
doc.setFontType("normal");
var desc4 = "Here will be our production Name.Here will be our production Name.Here will be our production Name.";
var splitDesc4 = doc.splitTextToSize(desc4, 220);
doc.text(340, 660, splitDesc4);
//////////// Third Page /////////////////
doc.addPage('a4','p');
doc.addImage(oPage, 'JPEG', 0, 0, 595, 842);
doc.addImage(pImage, 'JPEG', 70, 60, 256, 150);
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("bold");
doc.text(70, 230, '4. Split Screen');
doc.setFontType("normal");
doc.text(270, 230, 'Duration');
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(70, 250, 'Title of Scene');
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(340, 70, 'Description');
doc.setFontSize(12);
doc.setFont("arial");
doc.setFontType("normal");
var desc4 = "Here will be our production Name.Here will be our production Name.Here will be our production Name.";
var splitDesc4 = doc.splitTextToSize(desc4, 220);
doc.text(340, 90, splitDesc4);
doc.addImage(pImage, 'JPEG', 70, 270, 256, 150);
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("bold");
doc.text(70, 440, '5. Outro');
doc.setFontType("normal");
doc.text(270, 440, 'Duration');
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(70, 460, 'Title of Scene');
doc.setTextColor(100);
doc.setFontSize(14);
doc.setFont("arial");
doc.setFontType("normal");
doc.text(340, 280, 'Description');
doc.setFontSize(12);
doc.setFont("arial");
doc.setFontType("normal");
var desc5 = "Here will be our production Name.Here will be our production Name.Here will be our production Name.";
var splitDesc5 = doc.splitTextToSize(desc5, 220);
doc.text(340, 300, splitDesc5);
doc.save("GSV.pdf");
//doc.output('dataurlnewwindow');
}
render() {
return (
<div className="App">
<div className="mb5 btn1">
<button onClick={this.printDocument}>ð Print ð</button>
</div>
<div id="divToPrint" className="mt4" >
<h1>¯\_(ã)_/¯</h1>
<h1>ï¼ ^_^ï¼oèªèªoï¼^_^ ï¼</h1>
</div>
</div>
);
}
}
export default App;
0 回复 | 直到 7 年前
推荐文章