Swift webview input 으로 파일 가져오기
안녕하세요.
오늘은 웹뷰에서 iOS 내부에 저장된 파일을 가져올수 있는지
실험한 내용을 정리해볼까합니다.
실험은 크게 3단계로 나누어 진행했습니다.
1. iOS 폰 내부에 저장할 파일 만들기
- 저는 편의를 위해 txt 파일을 만들껍니다.
- 일반적인 저장이 아니라 파일앱에서 볼 수 있게 만들겁니다.
2. html 파일 만들기
- 저는 Html 파일이 필요하다보니 급하게 만들었습니다.
* html 코드는 통으로 올려놨기 때문에 메모장에 복붙해서 파일 형식만 .html 로 저장하시면
html 파일로 사용이 가능합니다.
3. iOS 에서 웹뷰 연결하기
- 이건 기본 기능을 이용하기 때문에 간단합니다.
참고로 저는 Html 에 대해서는 잘 몰라서
Html 코드가 이상할 수 있습니다.
자 그럼 0단계로 저는 위는 웹뷰 아래는 인앱인 모양을 만들었습니다.
1. iOS 폰 내부에 저장할 파일 만들기
- 눈치 빠른 분들은 아시겠지만 하단의 저 공간에서 저희는 .txt 파일을 만들겁니다.
- 우리는 눈에 보이는 공간(파일앱)에 저장해야 하니 아래 권한부터 만들어 줍시다. (매우중요)
- 저는 파일이름은 fileName / .txt 파일의 내용은 message 라고 만들어줄께요.
@IBAction func saveTextToFile(_ sender: Any) {
let fileName = "test_2024" // 파일이름
let message = self.sampleLbl.text ?? "입력된 값이 없음" // 파일내용
let documentsDirectory = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first
// 파일 URL 생성
let fileURL = documentsDirectory!.appendingPathComponent(fileName).appendingPathExtension("txt")
// 파일경로 + 파일 을 합친 Url 생성
do {
let textData = message.data(using: .utf8) // String->data
try textData?.write(to: fileURL) // 파일 쓰기
print("Success save!")
} catch let e {
print(e.localizedDescription)
}
}
- 저는 버튼을 누르면 저장되게 만들었습니다.
- 그래서 실제로 아래처럼 파일이 있는지 "파일"앱에서 확인이 가능합니다.
2. html 파일 만들기
- 웹뷰는 아래 html 을 사용했습니다.
- 참고로 웹뷰를 어떻게 하느냐에 따라 파일선택 옵션을 수정할 수 있습니다.
(파일 다중 선택, 파일 형식 제한 등....여기서는 단일 선택에 형식 제한 없이 했습니다.)
- 버튼을 누르면 불러온 파일의 내용을 볼 수 있게 만들어놨습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi, user-scalable=no" />
<script>
function myFunction() {
const selectfile = document.getElementById("myfile").files[0];
if(selectfile){
const fileReader = new FileReader();
fileReader.onload = function(e){
const message = e.target.result;
document.getElementById("demo").innerHTML = message;
};
fileReader.onerror = function(e){
console.error("Failed",e)
};
fileReader.readAsText(selectfile);
}
}
</script>
</head>
<body>
<h1>File upload</h1>
<p>Show a file-select field which allows a file to be chosen for upload:</p>
<form action="/action_page.php">
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<button type="button" onclick = "myFunction()">Click Me!</button>
</form>
<p id="demo"></p>
</body>
</html>* 참고 *
- 맨 위 쪽에 <meta ~ 라고 적힌 줄을 빼시면 모바일에서 웹뷰가 굉장히 작게 보입니다.
- html 파일이 잘 만들어 졌다면 브라우저에서도 아래처럼 보이게 됩니다.
자 이제 swift 에 해당 파일을 연결해줍시다.
혹시 궁금해 하실분들을 위해 말하면 제 html 은 아래 위치에 넣었습니다.
3. iOS 에서 웹뷰 연결하기
- import WebKit 를 미리 해주세요. (중요)
- 뷰는 WKWebView 를 사용할께요.
@IBOutlet weak var webview: WKWebView!
.
.
.
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
self.loadHTML()
}
// MARK: - Web 관련
func loadHTML(){
if let htmlUrl = Bundle.main.url(forResource: "test", withExtension: "html"){
webview.loadFileURL(htmlUrl, allowingReadAccessTo: htmlUrl)
let request = URLRequest(url: htmlUrl)
webview.load(request)
}
}- 이렇게 하시면 아까 만든 html 과 연결되게 됩니다.
- 기본 기능이다보니 간단하죠?
결과
- 텍스트 파일을 저장하고 위 웹뷰 부분을 이용해 저장한 파일을 불러오는 형식입니다.
- 그리고 웹뷰 하단 버튼을 누르면 txt 파일의 내용이 정상적으로 나오게 됩니다.
실험을 위해 만든 앱인데
사용된 함수들이 꽤나 활용할 곳이 많아서
정리해봤습니다.
그럼 오늘도 파이팅입니다.