Phantomjs submit and download cpf - pdf

I want submit with my cpf and dowload the pdf.
This is the code but is not functional.
var page = require('webpage').create();
page.open("http://www.samaetga.com.br/portal/SegundaVia.aspx", function(status) {
if (status === "success") {
console.log("sucesso");
};
page.render("page.png");
page.evaluate(function() {
document.getElementById("cpf").value = "00000000000";
document.getElementById("u_0_1").click();
});
setTimeout(function() {
page.evaluate(function() {
console.log('vou printar');
});
page.render("page.png");
phantom.exit();
});
};

Related

How to call APi Service in component of Vue3

I am working on an application where I have created service js which I need to consume in different components of vue3. Here is my service code
const base_url = "https://localhost:7005/";
var apiObject = {
data: function() {
return {
response : undefined
};
},
methods: {
fetchContent: function(apiEndpoint) {
axios
.get(`${base_url}${apiEndpoint}`)
.then(res => {
this.response = res
})
.catch(e => {
this.errors.push(e);
});
}
}
};
Here is my component code. It is not working it gives me the error show in image below
<script>
import {fetchContent} from "../service/apiService";
export default {
data() {
return {
// url_base: "https://localhost:7005/api/weather/",
weather: undefined,
error : false,
errormessage : "",
searchHistory : []
};
},
methods : {
async fetchWeather(e) {
if (e.key == "Enter" && this.query) {
let {response} =await fetchContent(`api/weather/forecast?city=${query}`) //get(query,`${weather_url}forecast?city=`); //await axios.get(`${this.url_base}forecast?city=${this.query}`);
this.setResults(response.data);
}else if (e.key == "Enter" && !this.query){
this.error = true;
this.errormessage = 'Please enter name to search!';
}
},
setResults(res) {
if(res.isSuccessful === true){
this.error = false;
this.weather = res.response;
this.saveData(res.response)
}else{
this.weather = undefined;
this.errormessage = res.response;
this.error = true;
}
},
saveData(res){
this.searchHistory = JSON.parse(localStorage.getItem("SearchHistory"));
if(this.searchHistory == null){this.searchHistory = [];}
res.forEach(x => {
this.searchHistory.push(x);
});
localStorage.setItem("SearchHistory",JSON.stringify(this.searchHistory));
}
},
};
</script>
Image

How to print image with PDF file in react native

I'm building a mobile application that will be able to print and generate PDF file both android and ios. I am having issues with adding image to it or printing image along with it. When I tried printing or generating PDF, what I only see is the ALT of the image. Please any help on how to go about it?
const copyFromAssets = async (asset) => {
try {
await Asset.loadAsync(asset);
const { localUri } = Asset.fromModule(asset);
return localUri;
} catch (error) {
console.log(error);
throw err;
}
};
const processLocalImageIOS = async (imageUri) => {
try {
const uriParts = imageUri.split(".");
const formatPart = uriParts[uriParts.length - 1];
let format;
if (formatPart.includes("png")) {
format = "png";
} else if (formatPart.includes("jpg") || formatPart.includes("jpeg")) {
format = "jpeg";
}
const { base64 } = await ImageManipulator.manipulateAsync(
imageUri,
[],
{ format: format || "png", base64: true }
);
return `data:image/${format};base64,${base64}`;
} catch (error) {
console.log(error);
throw error
}
};
const htmlContent = async () => {
try {
const asset = require('../../assets/images/unboard3.jpg');
let src = await copyFromAssets(asset);
if(Platform.OS === 'ios') {
src = await processLocalImageIOS(src);
}
return src;
} catch (error) {
console.log(error);
}
}
const createPDF = async (html) => {
try {
const {uri} = await Print.printToFileAsync(html);
Print.printAsync({ uri });
// this.setState({callPrint: false});
} catch(err) {
console.error(err);
// this.setState({callPrint: false});
}
};
const html = `
<html>
<body>
<div class='title-container'>
<img src="${htmlContent()}" alt="Logo" />
</div>
</body>
</html>`;

Facebook Login Component using Vue.js and Amplify

Here is the source for a self contained Facebook login component in Vue. I'm trying to use this with AWS Amplify. I successfully get the Facebook login screen to appear and I am able to get an identity id in AWS cognito. However, things aren't quite working.
<template>
<div>
<Button
class="FacebookButton"
v-text="buttonText"
#click="handleClick"
:disabled="isLoading"
/>
</div>
</template>
<script>
import Auth from "#aws-amplify/auth";
import { AmplifyEventBus } from "aws-amplify-vue";
export default {
name: "FacebookButton",
components: {
},
data() {
return {
buttonText: "Login to Facebook",
isLoading: true
};
},
computed: {},
async mounted() {
this.loadFacebookSDK();
await this.waitForInit();
this.isLoading = false;
},
beforeCreate() {},
methods: {
waitForInit() {
return new Promise(res => {
const hasFbLoaded = () => {
if (window.FB) {
res();
} else {
setTimeout(hasFbLoaded, 300);
}
};
hasFbLoaded();
});
},
statusChangeCallback(response) {
if (response.status === "connected") {
this.handleResponse(response.authResponse);
} else {
this.handleError(response);
}
},
checkLoginState() {
window.FB.getLoginStatus(this.statusChangeCallback);
},
handleClick() {
window.FB.login(this.checkLoginState, { scope: "public_profile,email" });
},
handleError(error) {
alert(error);
},
async handleResponse(data) {
const { email, accessToken: token, expiresIn } = data;
const expires_at = expiresIn * 1000 + new Date().getTime();
const user = { email };
this.isLoading = true;
try {
//const response = await Auth.federatedSignIn(
await Auth.federatedSignIn("facebook", { token, expires_at }, user);
this.isLoading = false;
AmplifyEventBus.$emit("authState", "signedIn");
//this.props.onLogin(response);
} catch (e) {
this.isLoading = false;
this.handleError(e);
}
},
loadFacebookSDK() {
window.fbAsyncInit = function() {
window.FB.init({
appId: "yourappidhere",
xfbml: true,
version: "v3.2"
});
window.FB.AppEvents.logPageView();
};
(function(d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
})(document, "script", "facebook-jssdk");
}
}
};
</script>
<style scoped>
</style>
This code is a port from a React example here: https://serverless-stack.com/chapters/facebook-login-with-cognito-using-aws-amplify.html
I'm trying to make this Facebook login work with the existing Amplify authenticator state management system by emitting the change to authState as follows:
AmplifyEventBus.$emit("authState", "signedIn");
This causes the Authenticator widget to 'disappear', but it doesn't let me get into my app. I'm not quite sure where to go next.

Data load fails on initial load but works on subsequent loads

<script>
const Detail = Vue.component('Detail', {
props: ['id'],
template:`
<div>
Pages: {{page}}
<p><b>ID:</b> {{ id }}</p>
<h1>{{page.title}}</h1>
<div v-if="page.content" v-html="page.content"></div>
</div>`,
data: function() {
return {
page : {}
};
},
created () {
console.log("Initial load with: " + this.id);
this.fetchData(); // this does not
},
watch: {
'$route': 'fetchData' // this works
},
methods: {
fetchData () {
console.log("Getting content for: " + this.id);
db.collection('pages')
.where("url", "==", this.id)
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function (documentSnapshot) {
data = documentSnapshot.data(); // I think is is what falls apart
});
});
this.page = data;
console.log(JSON.stringify(this.page));
}
}
}); // end component
Console results
Update
I added the following code
db.collection('pages')
.where("url", "==", this.id)
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function (documentSnapshot) {
console.log(JSON.stringify(documentSnapshot.data()));
data = documentSnapshot.data();
});
});
this.page = data;
And it show the JSON I am expecting in the console, but it does not change the UI. It still gives the data not defined error.
Update 2
fetchData () {
console.log("Getting content for: " + this.id);
let data = null;
db.collection('pages')
.where("url", "==", this.id)
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function (documentSnapshot) {
data = documentSnapshot.data();
});
});
this.page = data;
console.log(JSON.stringify(this.page));
}
Now gets. It failing on initial load and follow up loads too.
EDIT
Your problem is with asynchronous loading. You're making an async call to db.collection() but updating your this.page in viewModel after making db.collection() call. So this is why your this.page is not ending up with the data you're desiring to be updated with. Try this & I think it'll work:
fetchData () {
console.log("Getting content for: " + this.id);
db.collection('pages')
.where("url", "==", this.id)
.get()
.then(querySnapshot => {
querySnapshot.forEach(documentSnapshot => {
this.page = documentSnapshot.data(); //this.page will hold last documentSnapshot data
});
});
}
}
It looks like a const is what was needed needed.
fetchData () {
console.log("Getting content for: " + this.id);
db.collection('pages')
.where("url", "==", this.id)
.get()
.then(querySnapshot => {
querySnapshot.forEach(doc => {
const {title, content} = doc.data();
this.title = title;
this.content = content;
});
});
console.log(this.title);
}

Capture Popup page content through CasperJS or PhantomJS

A.html
<input type="submit" name="testLabel" value="Print Test" id="testLabel" onclick="myFunction('<?php echo $dynamic_page;?>')" >
<script>
function myFunction(page) {
var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
window.open(page, "_blank",strWindowFeatures);
}
</script>
CasperJS code
var casper = require('casper').create();
casper.start('http://localhost/test/a.html', function() {
this.echo(this.getTitle());
});
casper.thenClick('#testLabel');
casper.then(function() {
this.capture('page.png');
});
casper.run();
I have also try with phantomjs but i am not able to capture b.html page in page.png
Note : Popup page name is not fixed.
// this will set the popup DOM as the main active one only for time the
// step closure being executed
casper.withPopup(0, function() {
this.test.assertTitle('Popup title');
});
Complete code
var casper = require('casper').create();
casper.start('http://localhost/test/a.html', function () {
this.echo(this.getTitle());
});
casper.thenClick('#testLabel');
casper.waitForPopup(0, function () {
this.echo('Popup');
});
casper.then(function () {
this.capture('page.png');
});
casper.run();
Read more about waitForPopup
There is waitForPopup and withPopup methods so your code would look like this
var casper = require('casper').create();
casper.start('http://localhost/test/a.html', function() {
this.echo(this.getTitle());
});
casper.thenClick('#testLabel');
casper.waitForPopup(/.\.html$/, function() {
this.echo('Popup')
});
casper.withPopup(0, function() {
this.capture('page.png');
});
casper.run();